Proper way of building navbar entries?

support
1

I’m new to Hugo and I’m trying to build the menu entries in my navbar.
The docs page Menu Templates confused me more than it helped me:

Option 1 (from docs):

# partials/navbar.html

{{ range .Site.Menus.main }}
  {{ if .HasChildren }}
    <li>
      <ul>
        {{ range .Children }}
          <li></li>
        {{ end }}
      </ul>
    </li>
  {{ else }}
    <li></li>
  {{ end }}
{{ end }}

That makes sense to me. But from where does this get the items? Where is .Site.Menus.main and its .Children defined? In the config.toml file? Or are this content/parent/children.md files?

I couldn’t get it to work this way.

But I played around and got the following to work:

Option 2:

# partials/navbar.html

<!-- Navbar items -->
{{ range .Site.Params.navbar.item }}
<a class="navbar-item" href="{{ .url }}">
  {{ .name }}
</a>
{{ end }}

<!-- Navbar dropdown -->
{{ range .Site.Params.navbar.dropdown }}
<div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link">{{ .name }}</a>
  <div class="navbar-dropdown">
    {{ range .item }}
    <a class="navbar-item" href="{{ .url }}">{{ .name }}</a>
    {{ end }}
  </div>
</div>
{{ end }}

# config.toml

[params]

    [params.navbar]

        [[ params.navbar.item ]]
        name = "item_1"
        url = "#"

        [[ params.navbar.item ]]
        name = "item_2"
        url = "#"

        [[ params.navbar.dropdown ]]
        name = "dropdown"

            [[ params.navbar.dropdown.item ]]
            name = "dropdown_item_1"
            url = "#"

            [[ params.navbar.dropdown.item ]]
            name = "dropdown_item_2"
            url = "#"

However this has a big downside: I can’t arrange the items in the navbar.
I know there is a weight = X value, but where should I place that? Does this even work with Option 2 since I’m not using .Site.Menus?

What would be the better way of doing it? Option 1 or Option 2?
Where does Option 1 pull the entries from? And how could I get it to work?

2

Actually now it works if I do it exactly the same as in the documentation.
I don’t know what was the problem earlier. :grimacing:

However, the following is not working:

{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}

and

{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}

$currentPage returns Page(/test.md)