Nested menus

support
1

Hello,

I have inherited a Hugo docs site which has got into a bit of a mess over time.

I’m not an advanced web dev and I don’t know Go. However, I am technically minded and can follow technical docs fairly well.

The docs I’m working on have a linear menu, so every page referenced on the left menu bar refers to one single index.md. Some of these index.md pages are in the 1000s of lines long now as devs continually append content to a single page.

I figured it would be a simple thing to start restructuring and splitting out these pages into a nested menu configuration. However, after an afternoon of playing with Hugo, I have really no idea where to begin.

For example, when I read the Nested Menu documentation https://gohugo.io/content-management/menus/#nesting I don’t know where the parent field is, where to add any info, the instructions are so sparse, I really haven’t a clue what to do…

What I have is a list of menu items like this:

[[menu.main]]
name = “Ops”
url = “/ops/”
identifier = “ops”
weight = 6

Which refers to very, very long html pages, one per menu item. name url identifier makes sense (although I don’t know where you might need the identifier later on).

I don’t know what weight means. I looked it up and it mentions menu entry variables, but I’ve no idea where/what they are or how they work.

I then find Menu Templates which looks like I need to edit the Theme itself to create a nested menu. Is this correct?

Is there any self-starting quick start doc about nested menus that might help me?

Many thanks indeed,

Katharine

2

Hi there,

In your example:

[[menu.main]]
name = "Ops"
url = "/ops/"
identifier = "ops"
weight = 6
  • main is the menu
  • that menu item is one menu entry
  • a menu entry has these properties that you can define
    • which includes the parent field
    • as well as the weight field

So:

[[menu.main]]
name = Parent Item
url = "/mama-foo/"
identifier = "foo"

[[menu.main]]
name = Child Item
url = "/baby-bar/"
identifier = "bar"
parent = "foo"

You might need an identifier for when you have menu entries that have the same name, or an entry that appears multiple times (and, for example, have diffferent child menus).

It’s probably easier to play around with a smaller lorem ipsum site to see how Hugo works, instead of diving straight into a messy pile. Also, please note Requesting Help and Recommended Reading Reference .

1 Like
3

Everything pointyfar said, and also check the site you’ve inherited to see if it uses a theme made by someone else. It could had docs explaining how it works.

4

That’s perfect, thank you. Very straightforward actually.

5

OK, so I followed your advice. There is a FAQ page. I split it out into a number of sections.

This was the original menu entry:

[menu.main]]
name = “FAQ”
url = “/faq/”
identifier = “faq”
weight = 9

I add a child entry below it for one of the new subpages.

[[menu.main]]
name = “FAQ General”
url = “/faq/general/”
identifier = “general”
parent = “faq”
weight = 1 ? presuming 1 will order this subpage at the top

But nothing changes apart from the ordering of all the content on the single /faq/ page into alphabetical order. There is no separate FAQ General submenu and going to /faq/general/ generates a 404.

Any ideas?

6

There’s a limited amount we can do without seeing how the site is configured. If your repo is public, please share the link.

7

Thank you :slight_smile: https://github.com/dgraph-io/dgraph/tree/master/wiki

8

Normally I’d clone and take it for a spin, but I personally don’t know how to clone just a sub-folder, and I’m not gonna learn or download the entire dgraph repo. :slight_smile:

However, it does looks like your changes should have worked as expected. I believe your sidebar is being pulled in from the template at https://github.com/dgraph-io/hugo-docs/blob/master/layouts/partials/sidebar.html (the repo is pulled in with local.sh).

Were you using the dev server to see the changes? My first step was gonna be to reset all the weights to random, and see what happens.

Good luck! :slight_smile:

9

A few notes / questions:

  1. What version of Hugo are you using?
  2. What did you mean by “splitting into sections”
  3. Your content subfolders have both index.md and _index.md. This is probably causing issues somewhere as both content/foo/bar/_index.md and content/foo/bar/index.md will probably try to render at yoursite.com/foo/bar/. But which page is actually there? Have a read here and here.
  4. Note that creating a menu entry does not create a page, so if it 404s, it’s probably because the page itself is missing.
  5. Depending on which one you keep, ie faq/_index.md vs faq/index.md, faq/general/ may or may not be created. See above docs linked.
1 Like