Menu not being set to active

support
1

Hey guys I think I found a bug with the menu template example in the docs: Menu Templates | Hugo

When using this code sample for the menu:


<!-- sidebar start -->
<aside>
    <ul>
        {{ $currentPage := . }}
        {{ range .Site.Menus.main }}
            {{ if .HasChildren }}
                <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
                    <a href="#">
                        {{ .Pre }}
                        <span>{{ .Name }}</span>
                    </a>
                </li>
                <ul class="sub-menu">
                    {{ range .Children }}
                        <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
                            <a href="{{ .URL }}">{{ .Name }}</a>
                        </li>
                    {{ end }}
                </ul>
            {{ else }}
                <li>
                    <a href="{{ .URL }}">
                        {{ .Pre }}
                        <span>{{ .Name }}</span>
                    </a>
                </li>
            {{ end }}
        {{ end }}
        <li>
            <a href="#" target="_blank">Hardcoded Link 1</a>
        </li>
        <li>
            <a href="#" target="_blank">Hardcoded Link 2</a>
        </li>
    </ul>
</aside>

And specifying my menu.main in my config.toml file as so:

[[menu.main]]
    identifier = "book-me"
    name = "Book Me" 
    url = "/book-me/"
    weight = 1
[[menu.main]]
    identifier = "coaching"
    name = "Coaching"
    url = "/coaching/"
    weight = 2
[[menu.main]]
    identifier = "detox"
    name = "Detox"
    url = "/detox/"
    weight = 3
[[menu.main]]
    identifier = "forms"
    name = "Forms" 
    url = "/forms/"
    weight = 4
[[menu.main]]
    identifier = "about"
    name = "About"
    url = "/about/"
    weight = 5
[[menu.main]]
    identifier = "extras"
    name = "Extras"
    url = "/extras/"
    weight = 6
[[menu.main]]
    identifier = "blog"
    name = "Blog"
    url = "/blog/"
    weight = 7

It never adds the active class but if I remove all menu entries in my config.toml and add the menu entries in my page Front Matter as so:

menu:
  main:
    identifier: blog
    name: Blog
    title: Blog
    url: /blog/
    weight: 7

It adds the active class to my menu entries, is this a bug or am I just not understanding how menu templates are supposed to work?

Thanks.

2

I think your template is too complicated, to get a menu from config.toml

{{ range .Site.Menus.main}}
	<p> <a href="{{ .URL | relURL }}" Title="{{ .Name }}">{{ .Name }}</a> </p>
{{end}}

Extend it slowly an check what works.

3

Not sure what you mean that is the official template example in the docs, not something I made up.

4

@benmarte If you want to keep your menu in your config.toml then you probably have to do something like below, and compare the current page title to the current menu iteration name (assuming they’d be the same value).

<aside>
  <ul>
    {{ $currentPage := . }}
    {{ range .Site.Menus.main }}
      {{ $active := or (eq $currentPage.Title .Name) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}
      <li class="{{ if $active }}active{{ end }}">
        <a href="{{ .URL }}">
          <span>{{ .Name }}</span>
        </a>
      </li>
    {{ end }}
  </ul>
</aside>

In the docs you linked, also keep this in mind:

In the above, the menu item is marked as active if on the current section’s list page or on a page in that section.

So it’s likely that the pages in your menu are not each their own section, hence why I added the compare above for title-to-name.

3 Likes
5

@zberwaldt Thanks my problem was exactly what you mentioned, my pages were not their own section once I got them into sections it works.

Thanks again man :+1:

6

Hi all!

As the current page title and the current menu iteration name can be different (just as you said
@zwbetz) I use a slightly different version.

Works with pages in sub-folders, too!

{{ $active := or (eq $.URL .URL) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}
2 Likes