`IsMenuCurrent` not working with using `sectionPagesMenu`

I’m using sectionPagesMenu in config.yaml to automatically create menu entries for my top level sections. The navbar entry for the section is supposed to be highlighted (“active”) if the current page either is the section, or is a child of the section. However, it does not highlight when the current page is one of the top level sections.

I’m using the following code (similar to the Menu templates example) for my navbar:

{{ range .Site.Menus.main }}
    {{ $isActive := false }}
    {{ if or ($.HasMenuCurrent .Menu .) ($.IsMenuCurrent .Menu .) }}
        {{ $isActive = true }}
    {{ end }}
    <a class="navbar-item{{ if $isActive }} active{{ end }}"
       {{ if strings.HasPrefix .URL "http" }}target="_blank" rel="noopener"{{ end }}
       href="{{ .URL }}">{{ .Name }}</a>
{{ end }}

Note how the Menu field is empty in the generated MenuEntry according to debug.Dump:

&navigation.MenuEntry{ // p1 MenuConfig: navigation.MenuConfig{ Identifier: "", Parent: "", Name: "Blog", Pre: "", Post: "", URL: "", PageRef: "", Weight: 0, Title: "Blog", Params: maps.Params(nil), // p2 }, Menu: "main", ConfiguredURL: "", Page: &hugolib.pageState{}, // p3 Children: nil, }, 

I’m thinking that the Menu field being empty is the cause of my issue (since .IsMenuCurrent .Menu . will never be true if .Menu is nil). Is this a bug or is there an issue in my template code?

I think you can replace this:

{{ if or ($.HasMenuCurrent .Menu .) ($.IsMenuCurrent .Menu .) }}

With this:

{{ if or ($.HasMenuCurrent .Menu .) (.Page.Eq $) }}

It looks like the .IsMenuCurrent method on Page doesn’t like the automatic section menu.

I think you meant eq .Page $ instead of .Page.Eq $, the former works!

(complete code)

<nav class="navbar" aria-label="{{ i18n "aria_navbar" }}">
    {{ with .Site.Home }}
        <a class="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a>
    {{ end }}

    {{ range .Site.Menus.main }}
        {{ $isActive := false }}
        {{ if or ($.HasMenuCurrent .Menu .) (eq .Page $) }}
            {{ $isActive = true }}
        {{ end }}
        <a class="navbar-item{{ if $isActive }} active{{ end }}"
           {{ if strings.HasPrefix .URL "http" }}target="_blank" rel="noopener"{{ end }}
           href="{{ .URL }}">{{ .Name }}</a>
    {{ end }}
</nav>

Eq is a Page method to compare two pages.

Hmm, when I tried it that way I got an error:

render of "home" failed: e[1;36m"/home/bbaovanc/projects/bbaovanc.com/themes/bobatheme/layouts/_default/baseof.html:9:11"e[0m: execute of template failed at <partial "top.html" .>: error calling partial: e[1;36m"/home/bbaovanc/projects/bbaovanc.com/themes/bobatheme/layouts/partials/top.html:16:54"e[0m: execute of template failed at <.Page.Eq>: nil pointer evaluating navigation.Page.Eq render of "section" failed: nil pointer evaluating navigation.Page.Eq  render: failed to render pages: render of "page" failed: nil pointer evaluating navigation.Page.Eq 

Works for me…

git clone --single-branch -b hugo-forum-topic-46687 https://github.com/jmooring/hugo-testing hugo-forum-topic-46687
cd hugo-forum-topic-46687
hugo server

Well I guess there’s something else weird in my site, the theme is at GitHub - BBaoVanC/bobatheme: Hugo theme for boba.best and bbaovanc.com. Not meant for general use! and the site is GitHub - BBaoVanC/bbaovanc.com: The source code of my website, uses https://github.com/BBaoVanC/bobatheme., but there’s a ton of template code so maybe I’ll have to sift through it myself.

You have added an entry to the main menu in your site configuration that is not associated with a page:

  menu:
    main:
      - identifier: status-page
        name: Status
        url: https://status.bbaovanc.com

And there’s nothing wrong with that.

But it explains why .Page.Eq throws an error — you can’t call a method (.Eq) on nil.

So stick with your equality check.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.