.IsMenuCurrent returns false for single pages

support
1

I am using .IsMenuCurrent to set an is-active flag for my navbar links. Here is a minimal version of my navbar (assuming no children):

<nav class="navbar" role="navigation">
    <div class="navbar-end">
      {{ $currentPage := . }}
      {{ range .Site.Menus.main }}
        <a class="navbar-item{{ if $currentPage.IsMenuCurrent "main" . }} is-active{{ end }}" href="{{ .URL | relURL }}">
            {{ .Name }}
        </a>
      {{ end }}
    </div>
</nav>

And here is the relevant part of my config file:

[menu]
  [[menu.main]]
    name = "Home"
    url = "/"
    weight = 1

  [[menu.main]]
    name = "Posts"
    url = "/posts/"
    weight = 2

   [[menu.main]]
    name = "Projects"
    url = "/projects/"
    weight = 3

  [[menu.main]]
    name = "Teaching"
    url = "/teaching/"
    weight = 4

  [[menu.main]]
    name = "People"
    url = "/people/"
    weight = 5

For reference, I have an _index.html template for “Home”, “Posts” and “Projects” are sections that use a _default/list.html template, and “Teaching” and “People” are single pages that use a _default/single.html. When I am on the “Home”, “Posts”, or “Projects” page, {{ if $currentPage.IsMenuCurrent "main" . }} returns true and the appropriate navbar link is active. However, when I am on the “Teaching” or “People” page, {{ if $currentPage.IsMenuCurrent "main" . }} returns false and the navbar links are inactive. This is unexpected behavior, but I’m having a hard time figuring out where I’m going wrong. The only difference between these pages is that they use the _default/single.html template.

Any thoughts would be greatly appreciated. Thanks!

2

Have a look at sectionPagesMenu.

3
4

My apologies, but I don’t think this page contains the answer to my question. The sectionPagesMenu works for sections, but does not discuss single pages. And my problem deals with setting active my single pages.

1 Like
5

I’m a little rushed for time at the moment, but the link I gave you at least points to the source of your problems.

6

I might be missing the source you are referring to. The documentation you linked seems to only discuss .IsMenuCurrent and .HasMenuCurrent with respect to sections and not single pages. The documentation for .IsMenuCurrent does not suggest that the behavior is different for sections rather than single pages. I should also note that the following code produces the same result I described above:

<nav class="navbar" role="navigation">
    <div class="navbar-end">
      {{ $currentPage := . }}
      {{ range .Site.Menus.main }}
        <a class="navbar-item{{ if or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)  }} is-active{{ end }}" href="{{ .URL | relURL }}">
            {{ .Name }}
        </a>
      {{ end }}
    </div>
</nav>
7

At least for my purposes, the code below seems to be a reasonable workaround.

<nav class="navbar" role="navigation">
    <div class="navbar-end">
      {{ $currentPage := . }}
      {{ range .Site.Menus.main }}
        <a class="navbar-item{{ if (eq $currentPage.URL .URL) }} is-active{{ end }}" href="{{ .URL | relURL }}">
            {{ .Name }}
        </a>
      {{ end }}
    </div>
</nav>

I would still be interested to know why .IsMenuCurrent is not working as I’d expect.

3 Likes
8

I had exactly the same problem. .IsMenuCurrent and .HasMenuCurrent are not working on kind page. So if my menu states an about-page (kind: page) which I then visit, I would expect it to get the “is-active” class. But this is not happening.

If I understand the source code correct, it is intended, because both function have:

if p.IsPage() {
    return false
}

The documentation is indeed not very helpful in this matter. For me, it was an unexpected behavior. Maybe it should also work for kind pages to improve ux. For the .IsMenuCurrent I used this workaround:

{{ $currentPage := . }}
{{ range .Site.Menus.main }}
    <li class="{{ if eq $currentPage.URL .URL }}is-active{{ end }}">...</li>
{{ end }}
4 Likes
10

When the Menu item is declared in config file which is not a “PARENT” menu item and it’s just an individual page or single page, the .IsMenuCurrent doesn’t work.

If you want to utilize the .IsMenuCurrent feature of Hugo Menu then you must add the menu items using Front Matter of the page.

That’s the only way it works out.

Otherwise, you have to write your own code in order get things working properly.

I have menu at the moment which has some single pages and some section pages listed.
The section page .IsMenuCurrent and .HasMenuCurrent works properly but doesn’t work on Single Pages.

Another workaround is to custom code your MENU logic and not rely on Hugo Menus

@bep Please add this in the docs that .IsMenuCurrent and .HasMenuCurrent only works if the menu items are added using Front Matter only.

3 Likes