Problem with active class in multi language Navigation

support
1

Hey,

i could use some help regarding a menu on a multi language page.
I added my content pages on first level of the content folder, as of now i got

about.de.md
about.en.md
about.es.md
(more to come)

Now i want to have a menu for navigation those pages. I defined the menu as mentioned in the documentation

The definition in the config.toml looks like this:


[languages]
[languages.en]
weight = 1
languageName = "English"

[[languages.en.menu.main]]
    name = "Home"
    weight = 1
    identifier = "home"
    url = "/"
[[languages.en.menu.main]]
    name = "About"
    weight = 2
    identifier = "about"
    url = "/about/"
[[languages.en.menu.main]]
    name = "Online Shop"
    weight = 3
    identifier = "onlineshop"
    url = "/shop/productlist.php?menucatid=1"
[[languages.en.menu.main]]
    name = "Donate"
    weight = 4
    identifier = "donate"
    url = "/donate"
[[languages.en.menu.main]]
    name = "Greenlabel"
    weight = 5
    identifier = "greenlabel"
    url = "/greenlabel"
[[languages.en.menu.main]]
    name = "Clean Your Beach"
    weight = 6
    identifier = "cleanyourbeach"
    url = "/cleanyourbeach"
[[languages.en.menu.main]]
    name = "Facebook"
    weight = 7
    identifier = "facebook"
    url = "http://www.facebook.com/pages/cleanoceanprojectorg/491410435295?ref=ts"
[[languages.en.menu.main]]
    name = "Green Hosting"
    weight = 8
    identifier = "greenhosting"
    url = "http://www.facebook.com/pages/cleanoceanprojectorg/491410435295?ref=ts"


[languages.es]
weight = 2
languageName = "Español"

[[languages.es.menu.main]]
    name = "Inicio"
    weight = 1
    identifier = "home"
    url = "/"
[[languages.es.menu.main]]
    name = "Quines Somos"
    weight = 2
    identifier = "about"
    url = "/about/"
[[languages.es.menu.main]]
    name = "Tienda Online"
    weight = 3
    identifier = "onlineshop"
    url = "/shop/productlist.php?menucatid=1"
[[languages.es.menu.main]]
    name = "Donativo"
    weight = 4
    identifier = "donate"
    url = "/donate"
[[languages.es.menu.main]]
    name = "Etiqueta Verde"
    weight = 5
    identifier = "greenlabel"
    url = "/greenlabel"
[[languages.es.menu.main]]
    name = "Limpia Tu Playa"
    weight = 6
    identifier = "cleanyourbeach"
    url = "/cleanyourbeach"
[[languages.es.menu.main]]
    name = "Facebook"
    weight = 7
    identifier = "facebook"
    url = "http://www.facebook.com/pages/cleanoceanprojectorg/491410435295?ref=ts"
[[languages.es.menu.main]]
    name = "Green Hosting"
    weight = 8
    identifier = "greenhosting"
    url = "http://www.facebook.com/pages/cleanoceanprojectorg/491410435295?ref=ts"


[languages.de]
weight = 2
languageName = "Deutsch"

[[languages.de.menu.main]]
    name = "Startseite"
    weight = 1
    identifier = "home"
    url = "/"
[[languages.de.menu.main]]
    name = "Ăśber uns"
    weight = 2
    identifier = "about"
    url = "/about/"
[[languages.de.menu.main]]
    name = "Online Shop"
    weight = 3
    identifier = "onlineshop"
    url = "/shop/productlist.php?menucatid=1"
[[languages.de.menu.main]]
    name = "Spenden"
    weight = 4
    url = "/donate/"
    identifier = "donate"
[[languages.de.menu.main]]
    name = "Greenlabel"
    weight = 5
    identifier = "greenlabel"
    url = "/greenlabel"
[[languages.de.menu.main]]
    name = "Reinige Deinen Strand"
    weight = 6
    identifier = "clean your beach"
    url = "/cleanyourbeach"
[[languages.de.menu.main]]
    name = "Facebook"
    weight = 7
    identifier = "facebook"
    url = "http://www.facebook.com/pages/cleanoceanprojectorg/491410435295?ref=ts"
[[languages.de.menu.main]]
    name = "Green Hosting"
    weight = 8
    identifier = "greenhosting"
    url = "http://www.facebook.com/pages/cleanoceanprojectorg/491410435295?ref=ts"

I then used a partial for my navigation. There i tried to add an active class to my desktop menu and a selected state to the mobile menu, depending on the page i’m on. This looks like this:

<nav>
    <div class="language-chooser">
        <select id="language-chooser">
            <option value="{{ .Site.BaseURL }}en" {{ if eq .Lang "en" }}selected{{ end }}>ENGLISH</option>
            <option value="{{ .Site.BaseURL }}es" {{ if eq .Lang "es" }}selected{{ end }}>ESPAĂ‘OL</option>
            <option value="{{ .Site.BaseURL }}de" {{ if eq .Lang "de" }}selected{{ end }}>DEUTSCH</option>
        </select>
    </div>

    <div class="navigation">

        <ul class="navigation-desktop">

            {{- $currentNode := . -}}
            {{ range .Site.Menus.main -}}
                <li {{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "en.main" .) }}class="active"{{ end }}>
                    <a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
                </li>
            {{- end }}
        </ul>

        <select id="navigation-mobile" class="navigation-mobile">
            {{- $currentNode := . -}}
            {{ range .Site.Menus.main -}}
            <option value="{{ .URL | absLangURL }}" {{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "en.main" .) }}selected{{ end }}>{{ .Name }}</option>
            {{- end }}
        </select>

    </div>
</nav>

The multi language links themselves work as expected, the only thing not working is the active class / selected state. When i output {{ $currentNode.IsMenuCurrent }} it always is false.

Can anyone here help me with this?

2

For menu items defined in the config.toml, we do matching on URLs for IsMenuCurrent etc., so for multilingual sites I guess you will have to define the full URL path, so:

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

And then just:

 <option value="{{ .URL  }}"

This will be simpler in the next Hugo version, where you can add front matter to the home and section pages etc.

3

Ok, this now works for the homepage, but it does not work for the single.html layout that builds the about pages.

Is it possible that this is due to the difference between homepage not being rendered by a content file, while the about page is?

EDIT:
It might be of interest that the about page is rendered from the _default/single.html

4

Not sure what you mean by “does not work” – but for a page to answer truthfully to IsMenuCurrent etc. it must be a member of that menu (as: It needs a menu definition in frontmatter). There is a short cut which is documented with a title named “Section menus for the lazy blogger”.

1 Like
5

Hey bep,

thank you so much, now everything works well. I didn’t understand the front matter and it’s implications for menus. Thanks for clearing this up and having patience with me.

Cheers!

6

No problem – menus was the area I had the biggest problem understanding myself.