Active menu items

1

I’ve tried the samples on the docs, but my menu is not adding a class to the active menu element

What I have is:

The menu in config.toml

[menu]

	[[menu.main]]
		identifier = "posts"
		name = "Home"
		title = "blog section"
		url = "/"
		weight = 1

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

	[[menu.main]]
		identifier = "contact"
		name = "Contact"
		title = "blog section"
		url = "/contact/"
		weight = 3

And then this in my header partial:

<ul>
    {{ $currentPage := . }}
    {{ range .Site.Menus.main }}

    <li class="{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}active{{ end }}">
        <a href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
    </li>
    {{ end }}
</ul>

What am I doing wrong?

2

Nothing, but for the ‘active’ class to show up, you have to define the menu in the page’s own frontmatter and not on the config.toml file.

4

Thanks Bruno. Just to make a quick recap and in case anyone else need this, this is how everything looks now:

Page files have in the frontmatter:
—
title: “Contact”
date: 2018-05-30T13:17:20+02:00
menu: main
name: “Contact”
weight: 3
—

Code for the menu is:

<ul>
    {{ $currentPage := . }}
    {{ range .Site.Menus.main }}

    <li class="{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}active{{ end }}">
        <a href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
    </li>
    {{ end }}
</ul>

And on my config file I only have this to overwrite the default “Posts” name and URL:

[menu]

	[[menu.main]]
		identifier = "posts"
		name = "Home"
		title = "blog section"
		url = "/"
		weight = 1
5 Likes