How to make multi-layer nav?

support
1

Hi,I’m new to Hugo and after a few weeks playing with it, now I want to create a multi-layer nav. But I found out I cannot do that.
I was the theme Beautiful-Hugo and what I want is similar to this:

work
└── 2020
    ├── 12
    │   ├── 15.md
    │   ├── 17.md
    │   ├── 18.md
    │   ├── 21.md
    │   └── _index.md
    └── _index.md

What I want is got a sub-menu of 2020 in my work menu [ x ]
and a list page in my work-2020 page [ ]

I have set the parent parameter in the 2020/_index.md file like:

menu:
    main:
        title: "2020"
        parent: "work"

The 2020/12/_index.md is set to :

menu:
    main:
        title: "2020-12"
        parent: "2020"

And what I got is a blank page at http://mysite.com/work/2020
However if I manually type the url to http://mysite.com/work/2020/12 then I can get the list page as I expect.
What I’m missing?

2

Exactly how the menu is generated depends on the theme you’re using - so you’ll have to check your theme’s documentation for help.

As a general maybe-this-helps comment, setting the front matter in the .md files is usually only part of the story for making a menu in Hugo - you might well have to change your config.toml/.yaml file - https://gohugo.io/content-management/menus/. But this depends on exactly what you’re theme is doing.

1 Like
3

I just don’t want to manually add menu entities inside my config.toml , so I’m looking for a more smarter way to handle this.
So maybe this happens because the theme itself not support? Is there anything I missing in the _index.md? And I discover if I change _index.md which in the 2020/12/ folder to index.md. I will then got a blank page under the http://mysite.com/work/2020/
Is there any other solution besides change a theme?

4

I wish I could help, but I don’t want to steer you in the wrong direction, and since I don’t know the theme in question I’m not best placed to comment on what the theme can/cannot do, sorry! Check with the theme author for support, or dig through the theme code itself to see what it’s doing. . .

1 Like
5

did you put in the page work “identifier” to which “parent” refers?

menu:
    main:
        title: "work"
        identifier: "work"

The same with submenus: every parent page needs an identifier for the subpages.

6

Yes. And I think this maybe a theme issue. Thinking about changing to another theme.