Highlight current menu item - config.toml

support
1

Hey All,

I have read through a bunch of the posts and comments here and so far I am having no joy with highlighting the current menu item. Here is the menu portion of my config.toml

    [menu]
      [[menu.main]]
        identifier = "homepage"
        name = "Home"
        url = "/"
        weight = 1

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

      [[menu.main]]
        identifier = "experiments"
        name = "Experiments"
        url = "/experiments"
        weight = 3

      [[menu.main]]
        identifier = "partnership"
        name = "Partnership"
        url = "/partnership"
        weight = 4

      [[menu.main]]
        identifier = "accelerator"
        name = "Accelerator"
        url = "/accelerator"
        weight = 5

In my template I have the following:

{{ $currentPage := . }}
{{ range .Site.Menus.main }}
<li>
    <a href="{{ .URL }}" {{ if $currentPage.IsMenuCurrent "main" . }}class="active"
        {{ end }}>{{ .Name }}</a>
</li>
{{ end }}

I have also tried the above with:

{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}class="active"{{ end }}

My content directory has the following structure:

content
  >  about
        > _index.md
...
_index.md

When I load up the homepage, the menu item is highlighted and everything is great. When I navigate to any other page however, the relevant menu item is no longer being highlighted i.e. class is not being added.

When I had the menu items configured inside each content .md file all worked well but, I ran into a problem where the CMS would overwrite the contents of these files and remove the menu configuration so, I am looking at configuring the menu from config.toml

Another aspect of this that might, or might not affect the end result is that, except for the homepage the other pages have a custom layout and type, for example:

type: "accelerator"
layout: "accelerator"

Anyone else run into this problem and was able to solve it? Thank you all.

2

Hi there,

It would be easier to help you if you had your code somewhere we could have a look at, please see Requesting Help .

3

Your menu name reflect the used sections? compare the section name with the menu names.

4

Yeah, unfortunately this repo is private.

5

So, when on for example http://localhost:1313/experiments/ I see the following:

{{ .CurrentSection }} # Page(/experiments/_index.md)
{{ .Section }} # experiments

Looking at the menu config, I have the following:

identifier = "experiments"

Seems like that is as it should be? Thank you for the comment.

6

Ah, so reading the docs for isMenuCurrent I see why this does not work.

So IsMenuCurrent will return true if the Page object is the same object as .Page in the MenuEntry. Because the menu is not configured via frontmatter but via config.toml .Page will be null, as the docs say:

.Page
* Page Reference to the page object associated with the menu entry. This will be non-nil if the menu entry is set via a page's front-matter and not via the site config.

Same goes for HasMenuCurrent :frowning:

7

This ended up working for me:

{{ if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}
  class="active"
{{ end }}

A little explanation:

($currentPage.IsMenuCurrent "main" .)

This takes care of adding active for the homepage.

 (eq $currentPage.Section .Identifier)

This takes care of adding active for all of the other individual pages. w00h00! \o/

8

Thanks for this. 2 (noob) questions on this:

  1. Which part of the template does this have to be in? The header.html?
  2. Does the if statement still have to be wrapped inside this (as in your original code):
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
<li>
    <a href="{{ .URL }}" 
{{ if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}
  class="active"
{{ end }}

{{ .Name }}</a>
</li>
{{ end }}

[quote=“schalkneethling, post:1, topic:22723”]

{{ $currentPage := . }}
{{ range .Site.Menus.main }}


  • <a href=“{{ .URL }}” {{ if $currentPage.IsMenuCurrent “main” . }}class=“active”
    {{ end }}>{{ .Name }}

    • {{ end }}

    [/quote]`

    > Preformatted text

    `