How do I set an "active" class for a top-level page in a menu?

support
1

I have a page whose URL is /about/ and a corresponding menu entry for it in my main nav. I would like to add an “active” class to it when I’m viewing the page.

I tried the following and it did not work:

{{ $currentNode := . }}
{{ range .Site.Menus.menu }}
<a href="{{ .URL }}" class="btn-header hidden-xs{{if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} active{{end}}">
  {{ .Name }}
</a>
{{ end }}

And in my config.toml:

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

What am I doing wrong?

2

Hi @joejanuszk - I don’t know if you solved your issue, but there’s a detailed discussion here: https://discuss.gohugo.io/t/confusion-regarding-proper-use-of-menus/1647.

Also be aware that there are a couple of tricks for defining menus - they can be defined at the site level in your main config file, and also in the frontmatter of an individual page. They get combined together when the site is built.