Highlight active top level menu item

I’m unable to highlight the active top level menu item having configured permalinks in the config.

With the following config:

[permalinks]
  blog = "/:section/:year/:month/:slug/"
  pages = "/:title"

[menu]
  [[menu.main]]
    name = "Home"
    identifier = "home"
    url = "/"
    weight = 10

  [[menu.main]]
    name = "Blog"
    identifier = "blog"
    url = "/blog/"
    weight = 20

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

And with the following lazy blogger code to highlight the menus:

{{ $currentPage := . }}
{{ range .Site.Menus.main }}
<li class='menu-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} current-menu-item{{end}}'>
  <a title="{{ .Name }}" href="{{ .URL }}">{{ .Name }}</a>
</li>
{{ end }}

Only the home menu (and blog if I’m at the path /blog) are highlighted. Is this a known problem or am I likely to have misconfigured something?

Okay, so I found something to do with sub-menus and having set the front matter I can get the highlighting to work. However, what is the equivalent of the below in YAML?

+++
title = "About"
date = 2017-12-27T10:20:12Z
author = "amb85"
[menu]
[menu.main]
parent = "about"
+++

Based on the docs, I tried:

---
title: "About"
date: 2017-12-27T10:20:12Z
author: "amb85"
menu:
  - main:
    - parent: "about"
---

However, that doesn’t work and I’m stumped at how to represent this in YAML.

Ah, okay, the YAML in another section of the docs doesn’t have the hyphens:

---
title: "About"
date: 2017-12-27T10:20:12Z
author: "amb85"
menu:
  main:
    parent: 'about'
---

This works.

1 Like

I’m having the same issue:
Hey, where does the above code go?