The menu works, but it doesn't add an "active" class to the current page

support
1

Hello,
This is how I configured the menus in my hugo.toml file:

# ----------------------------------------------------------------------------
# Languages
# ----------------------------------------------------------------------------
[languages]

  # English
  # --------------------------------------------------------------------------
  [languages.en]
    weight = 1
    languageCode = "en-US"
    languageName = "English"

    # Menu
    [[languages.en.menu.main]]
      name   = "Home"
      url    = "/"
      weight = 1
    
    [[languages.en.menu.main]]
      name       = "About Us"
      url        = "/about/"
      identifier = "about"
      weight     = 2

  # Hungarian
  # --------------------------------------------------------------------------
  # Override general configuration
  [languages.hu]
    title        = "Ăšj Hugo Weboldal"
    languageCode = "hu"
    languageName = "Hungarian"
    weight       = 2
  
    # Override default site params
    [languages.hu.params]
      description  = "Ăšj Hugo Weboldal"
      copyright    = "Copyright {currentYear} Zoltan Kiraly. Minden jog fenntartva."

    [[languages.hu.menu.main]]
      name   = "CĂ­mlap"
      url    = "/"
      weight = 1

    [[languages.hu.menu.main]]
      name   = "RĂłlunk"
      url    = "/about/"
      identifier = "about"
      weight = 2

The menu is rendered using the default header.html partial (the partial that is part of a newly created Hugo theme):

{{ partial "menu.html" (dict "menuID" "main" "page" .) }}

Which outputs an HTML like this:

<nav>
    <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/about/">About Us</a>
    </li>
    </ul>
  </nav>

However, when I’m on the About us page and the browser is at http://localhost:1313/about, the class="active" is not added to this code:

    <li>
      <a href="/about/">About Us</a>
    </li>

I would appreciate any suggestions or advice on where I could check why this isn’t working.

2

When creating menu entries in your site configuration, set the pageRef property for internal links. The url property is for external links only. See documentation.

1 Like
3

You do not show us what you have added to the menu.html partial. That is where you likely need to add code that adds the “active” class when needed.

This is how I have done it in my theme:

I’m using aria-current="page" instead of a class “active” but that is a small change.

4

I’m using the default menu.html. The one that comes with Hugo when you generate a new theme. I’m using hugo v0.125.6+extended.

{{- $page := .page }}
{{- $menuID := .menuID }}

{{- with index site.Menus $menuID }}
  <nav>
    <ul>
      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
    </ul>
  </nav>
{{- end }}

{{- define "partials/inline/menu/walk.html" }}
  {{- $page := .page }}
  {{- range .menuEntries }}
    {{- $attrs := dict "href" .URL }}
    {{- if $page.IsMenuCurrent .Menu . }}
      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
    {{- else if $page.HasMenuCurrent .Menu .}}
      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
    {{- end }}
    {{- $name := .Name }}
    {{- with .Identifier }}
      {{- with T . }}
        {{- $name = . }}
      {{- end }}
    {{- end }}
    <li>
      <a
        {{- range $k, $v := $attrs }}
          {{- with $v }}
            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
          {{- end }}
        {{- end -}}
      >{{ $name }}</a>
      {{- with .Children }}
        <ul>
          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
        </ul>
      {{- end }}
    </li>
  {{- end }}
{{- end }}

I think this is the part that should handle it:

{{- range .menuEntries }}
    {{- $attrs := dict "href" .URL }}
    {{- if $page.IsMenuCurrent .Menu . }}
      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
    {{- else if $page.HasMenuCurrent .Menu .}}
      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
    {{- end }}

I will try what @jmooring suggested.

5

It works after setting “pageRef”. Thank you.

I want to build a hamburger menu where I need to modify the markup a bit. This is how the original markup looks, which is inside partials/menu.html:

{{- with index site.Menus $menuID }}
  <nav> 
    <ul> 
      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
    </ul>
  </nav>
{{- end }}

Modify to this:

{{- with index site.Menus $menuID }}
  <nav class="main-navigation">
       <div class="menu-button">
                ....
       </div>
       <div class="menu-container">
         <ul class="nav-menu">
           {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
         </ul>
       </div>
  </nav>
{{- end }}

I can do this by simply editing the menu.html partial, of course, but since this partial is used to generate menus in general, I thought it might not be the best approach. I will have just one menu on the site, so I think hardcoding it would work. What is your opinion on this?