Another way to make a menu item active

[zwbetz]

@mojoa

Would it be possible to explain the logic of the code for those of us who don’t read it like a book?

I’m on my phone so this will be terse.

Mark the menu item as active if the menu item name equals current page title:

{{ $active = or $active (eq .Name $current.Title) }}

Mark the menu item as active if the current menu item name is Blog and the current page section is post:

{{ $active = or $active (and (eq .Name "Blog") (eq $current.Section "post")) }}

Mark the menu item as active if the current menu item name is Tags and the current page section is tags:

{{ $active = or $active (and (eq .Name "Tags") (eq $current.Section "tags")) }}

@mojoa

Also, I am not sure what exactly to look for. What makes the menu look active?

In the case of the Cupper theme, the menu item will be visually highlighted.

[regis]

Note that were you menus config added through individual page’s Front Matter, you could access any Menu item’s page with .Page, and therefor perform more faithful and generic tests than with .Name.

Per example instead of testing the menu item’s .Name against the name of current page’s section, you could compare the sections.

  {{ $active := or ($current.IsMenuCurrent "nav" .) ($current.HasMenuCurrent "nav" .) }}
  {{ $active = or $active (eq .Page $current) }}
  {{ $active = or $active (eq .Page.Section $current.Section)) }}

[kascme]

In my setup, I used comparison of the urls to achieve this. No need for any or clause:

{{ $active := in $current.RelPermalink .URL }}

[zwbetz]

@kascme I like this way too. But I use the filename for my permalinks so this wouldn’t work in my specific case

[kascme]

True. But if you use path.Dir you should get the menu link marked as active as well:

{{ $active := in $current.RelPermalink (path.Dir .URL) }}

[zwbetz]

Unfortunately that doesn’t work as expected. This is a screenshot of the menu while on the “Blog” page (only the Blog menu item should be highlighted).

For debugging, I’ve printed the path.Dir for each menu item.

[zwbetz]

Playing off your syntax, I got the below snippet to work as expected, but I prefer my original way.

{{ $active := or ($current.IsMenuCurrent "nav" .) ($current.HasMenuCurrent "nav" .) }}
{{ $active = or $active (eq .Name $current.Title) }}
{{ $active = or $active (and (eq (trim (path.Dir .URL) "/") $current.Section) (ne $current.Section "")) }}

[kascme]

@ zwbetz: You are right. I had no Home nor any other root link in my menu, so it was working for me. I guess a check if the menu item belongs to Kind section or page would also work. But that’s again adding extra lines. My example above made using .IsMenuCurrent, .HasMenuCurrent obsolete, so it was just a one liner. That’s why I suggested it, but as you pointed out, it is not working for every use case.

[bronze]

thank you everyone for this.
.IsMenuCurrent/.HasMenuCurrent seem bugged…

[jonathanulco]

@zwbetz

Does it work for a multilingual menu? Shouldn’t it be compared with .relLangUrl?

[Grob]

For multilingual menus you can use this:

{{ range . }}
  {{ $active := eq $.RelPermalink (.URL | relLangURL) }}
  {{ $active = or $active (eq $.Section (lower .Name)) }}
  <li>
    <a href="{{ .URL | relLangURL }}"{{ if $active }} class="active"{{ end }}>{{ .Name }}</a>
  </li>
{{ end }}

[jonathanulco]

I don’t understand what’s going on ?

http://localhost:1313/en/what-we-do/

[Grob]

This looks correct. .URL | relLangURL and .RelPermalink are identical. Do they both change when you click on another link? (You posted a link to localhost.)

[jonathanulco]

Thank you for your time.
So far I haven’t deployed anything. Localhost was for context.
Indeed when I click on the other entries nothing changes.

[Grob]

Could you post the code for your navigation or a link to your repo? Then I can test it locally.

I am using the code I posted above—and multilingual menus are working.

[jonathanulco]

Thanks again for your time.

Partial navigation https://github.com/jonathanulco/hugo-multilang/blob/master/layouts/partials/navigation.html
Config https://github.com/jonathanulco/hugo-multilang/blob/master/config.toml
And /content https://github.com/jonathanulco/hugo-multilang/tree/master/content

[Grob]

@jonathanulco

Thanks again for your time.

No problem!

Ok. Now I know what the problem is: In _baseof.html just replace

{{ partialCached "header" . }}

with

{{ partial "header" . }}

The header partial needs to be rendered for every page.

[jonathanulco]

It’s work, thank you !