Hierarchical Menus

Hi there,

Thank you for creating this great piece of software!
The documentation for Menus mentions the following feature: “Handle nested menus with unlimited depth”

Can someone provide

  1. an example of a sublevel menu item associated to [[menu.main]] in the sites ‘config.tom’ file?
  2. frontmatter for an archetype associating content to the sublevel?

config.toml:

[[menu.main]]
name = “Section folder”
identifier = “sect”
url = “/section/”

[[menu.main]]
name = “Sublevel one”
identifier = “sub1”
url = “/section/folder1/”

[[menu.main]]
name = “Sublevel two”
identifier = “sub2”
url = “/section/folder2/”

I think this would make a great addition to the Hugo documentation, and would answer several questions on this board. Thank you for your support, I have tried everything to get this working.

2 Likes

Yes! First part of the puzzle I was able to resolve. The documentation mentions the use of a ‘parent field’, hope this helps someone else as well. This is how I was able to create the parent/child relationship.

config.toml:

[[menu.main]]
name = “Section folder”
identifier = “sect”
url = “/section/”

[[menu.main]]
name = “Sublevel topic”
parent = “sect”
identifier = “sub1”
url = “/section/folder1/”

archetype frontmatter:

+++
[menu]
[menu.main]
parent = “sub1”
+++

It took me a while to understand the physical ordering of my content files in folders have no effect on Menus. A Menu is a flat array of url’s. The fields in the front matter are also no expression of hierarchy, even though it looks like that.

4 Likes

This actually set me on the right track on my current problem. Thank you for sharing Jeroen. I had been creating all the menu items in the config.toml file including the section’s children and children’s children because I had been unable to put the menu information in the frontmatter until you posted that the correct format (in TOML) is

[menu]
[menu.main]
parent = “parentIdentifier”

instead of

[[menu.main]]
parent = “parentIdentifier”

(Not sure if the format is obvious or not because I am not very familiar with toml)

The other problem I was having was listing the content from a section’s grandchildren on the parent page when Hugo renders every page of a section from the layouts/{type of section}/single.html template, regardless of any menu hierarchy ( it would be cool if Hugo would automatically use a list template if a child of a section is the parent of its own children and so on) but I found a work around by changing the type of the grandchildren to be equal to the slug of the parent and using a partial which

in layouts/{type of section}/single.html
{{range where .Site.Pages “Type” .Slug }}
{{partial “booklist.html” . }}
{{end}}
{{end}}

This work around also allows me to customize the single.html template for the grandchildren via a type folder in layouts. Did you have a similar problem when dealing with page hierarchy and if so did you have a similar solution?

I used Hugo to generate my blog website and added support for the nested menu structure. I have written an article for all the changes I have done on my Hugo website to support the nested menu.

2 Likes