How to generate the parent-child pages in the menu based on the folder structure?

support
1

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 menu to "main" in the front matter:

menu: "main"

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 index.md, etc.).

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.

2

Look at one of my test projects dealing with documentation: https://gitlab.com/lego2018/hugo-documentation-example-2.git

Perhaps this helps.

3

@Leo_Merkel I checked your link, but didn’t really find the menu there, can you point me to the part which actually generates and renders the menu?

In the meantime with help of a colleague I found a working solution, using the sections concept for this purpose, and changing the navigation partial to render the menu based on the sections rather than the menu model.

4

It’s in layouts/partials/sidebar.html. The data which are referred in that partial are all in data.