How to set parent menu item as active"

[corneelonline]

Hi all,

I’m struggling with the side menu in my website. To render the side menu I use this piece of code:

  <ul class="side-menu">
  {{ $currentPage := . }}
  {{ range .Site.Menus.genealogie }}
    <li class="menu-item {{ if eq $currentPage.RelPermalink .URL }}active{{ end }}">
      <a href="{{ .URL }}">
        <span>{{ .Name }}</span>
      </a>
    </li>
  {{ end }}
  </ul>
</aside>

This highlights the current page, but when I’m at a child page it does not work. What I would like is this:

| - level_one
| - | - level_two
| - | - | - level_three
| - | - | - level_three

Level one gets class “active” when at level two or three. Is this possible?

[pamubay]

Yes, hugo has both .IsMenuCurrent and .HasMenuCurrent to check if the parent page or children page is current active menu.
Read more on Hugo Menu Entry

You can learn more from Hugo Documentation sidebar here. nav-link-docs.html

[corneelonline]

Thanks for your suggestion. In this case it doesn’t work (I tried). Because this site has a lot of pages, only the pages of “level one” are displayed in the menu. The subpages are not rendered in the menu.

So, when I’m at level two I’d like level one (= parent) to be active.

[pamubay]

Ahh i see, so the one who has menu entry is first-level section only right. the level-one?

Then you can compare the .Section variable of each pages with the .Identifier of the section menu entry.

{{ if eq $currentPage.Section .Identifier }}

[corneelonline]

You pointed me in the right direction. I solved it with this code:

{{ if or (eq $currentPage.RelPermalink .URL) (eq $currentPage.Parent.Name .Name) }}

Thanks again!