I’m working on creating a documentation site with Hugo, which has a nested menu structure, so some pages have child pages.
The way I’m achieving the rendering of the menu: in the root-level pages set
"main" in the front matter:
And in the child pages I set the parent explicitly:
menu: main: parent: 'Parent page title'
This is not that bad, but it’s a bit of extra manual config that’s needed on every page.
Would this be possible to do automatically based on the folder structure? What I imagine as a desired solution is if I have the following folder structure:
/ |-page-a.md |-page-b.md |-page-c/ |-index.md |-subpage-a.md |-subpage-b.md
Then I’d like the following menu structure being generated without setting any front-matter fields manually:
- Page A - Page B - Page C (this gets its content from `/page-c/index.md`) - Subpage A - Subpage B
Would this be possible to do today with Hugo?
I was thinking about changing the
menu partial of my theme, and instead of just iterating over
.Site.Menus.main.ByWeight, and then use the
.Children property of the menu items, do something completely custom, and generate the menu based on the file location (so parse the path, check how many
/s are in it, check if the file name is
Do you think this is a good direction? And do you happen to know about any project that already does something similar?
I’ve seen that another approach achieve something like this is to use the “Content Sections” by putting an
_index.md file at the root of the subfolders. With this approach, is it possible to put actual content in these
_index.md pages, and make the non-leaf menu items clickable, and show up as a normal page? Because in the sites I found using this (for example the Kubernets documentation site), the non-leaf pages can only used in the menu to open/close the pages underneath, so they don’t have content themselves, and cannot be navigated to, which is something I’d really like to do.