[Resolved]How to make submenu in config.toml?

support
1

Hi, I’m new to hugo, I try to produce a sub Menu in main menu but failed, googled but didn’t find the answer.

Hereby is my settings in config.toml:

[[menu.main]]
name = “Our Teas”
identifier = “ourteas”
url = “/categories/”
weight = 100
hasChildren = true

[[menu.main]]
name = “Black tea”
parent = “ourteas”
identifier = “blacktea”
url = “/categories/black-tea/”

2

Try giving your 2nd menu a different name.

3

Thanks, I changed name = “Black tea” into “Black” but didn’t work.

4

What I meant is that you shouldn’t use
[[menu.main]] twice.

5

Thanks for the note, changed to [[menu.sub]] but didn’t work too:

[[menu.sub]]
name = “Black tea”
parent = “ourteas”
identifier = “blacktea”
url = “/categories/black-tea/”

6

Tried [[menu.main.sub]] and didn’t work too. also can’t find a hint from the Hugo documents.

7

What you have originally looks correct. I’m setting a site up now with something similar. What is not working? Can you show your menu template code.

8

Let me expand a little now that I’m off my phone. Marking the menu up with the sub menu set with its Parent to be the identifier of the Parent menu, is correct. Next it comes down to your implementation of how to make that work. How are you weaving together your css, js, and Hugo template code?

The code in the links below, with:

{{ $currentPage := . }}
    {{ range .Site.Menus.main }}
      {{ if .HasChildren }}
        <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
          <a href="#">
            {{ .Pre }}
            <span>{{ .Name }}</span>
          </a>
          <ul class="sub-menu">
            {{ range .Children }}
...

… works, but you need to adapt it to the choices you make in terms of css/js framework.


9

I am using theme named Casper Two, I did’t change the default css or js, to make it work, should I?

10

I think your original attempt looked correct, except for hasChildren = true which is meaningless because this value will be calculated depending on whether the entry has children or not.

However, your theme does not seem to support sub-entries (second-level menus). So I guess your original attempt resulted in the parent entry being displayed properly, but without children. Is that correct?

If so, please open an issue on the theme’s bug tracker, this has nothing to do with hugo or your config :slight_smile:

11

It does not look like the demo site of that theme has any “sub menus”. You’ll need to add them (overriding the theme), or get the theme author to add them.

Edit: oops, @cmal already answered

12

Thank you very much @cmal and @RickCogley, already submitted the issue to the theme developer.

14

My fault, I don’t know how, but in the meanwhile it works.
Thank you anyway.