Only the home page is shown as an active link when it is active

support
1

Hi.
My menu items are kept in Hugo’s configuration file, like so:

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

  # English
  # --------------------------------------------------------------------------
  [languages.en]
    weight = 1

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

  # Hungarian
  # --------------------------------------------------------------------------
    [[languages.hu.menu.main]]
      name   = "Címlap"
      url    = "/"
      weight = 1

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

and I try to retrieve them in a partial, like so:

<div class="menu-container">
    <ul id="top-menu" class="menu">
    {{ $current := . }}
    {{ range .Site.Menus.main }}
    {{ $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) }}
    {{ $active }}   /* <------- this shows false for everything except the Home page /
    <li class="menu-item">
      <a href="{{ .URL | relLangURL }}" class="{{ if $active }}active{{ end }}">
        {{ .Name }}</a>
     ....

The problem is that the “active” class is only added to the home page url “/” if I go to localhost:1313/about or any other page that is not /, the “active” link doesn’t get inserted. I wasted several hours but I couldn’t figured out why is that happening. I would be grateful for any suggestion.

2

Meanwhile I figure out that I need to add an additional “/” in the config.toml file for the URLs.

[[languages.hu.menu.main]]
  name   = "Rólunk"
  url    = "/about/" <-  ending slash here
  identifier = "about"
  weight = 2

And use something like this in the navigation template to display active links (I found this code on this forum):

 {{ $current := . }}
    {{ range .Site.Menus.main }}
    {{ $active := eq $.RelPermalink (.URL | relLangURL) }}
    {{ $active = or $active (eq $.Section (lower .Name)) }}

I have no idea what the code does, but it seems to work.