Mark child menu folder as active

support
1

As a follow-up to this: Another way to make a menu item active

That solution looks very close to what I’m trying to do, but I’d like a more generic solution that also works for child items in a sub-folder.

Has anyone accomplished this with nested menus?

Here is the folder structure I’m working with:

/nav/parent1/child1.md
/nav/parent1/child2.md
/nav/parent1/child_folder1/_index.md
/nav/parent1/child_folder1/child_folder_item1.md

Obviously when any child of a parent is displayed, that Parent menu will be expanded with that Child item highlighted. However, when I have another folder beneath that I want to display the “Child Folder Item 1” page, but highlight “Child Folder 1” in the menu and not display “Child Folder Item 1” in the menu. (I hope I explained that OK).

Here’s how I want the menu to look for Child Folder Item 1-n:

  • Parent Item 1
    • Child Item 1
    • Child Item 2
    • Child Folder 1
  • Parent Item 2
  • Parent Item 3
2

wouldn’t the method in the documentation allow this?

{{ if ( $.Page.IsMenuCurrent "main" .) ( $.Page.HasMenuCurrent "main" .) }} active {{- end -}}
2 Likes
3

@brunoamaral I think that’s it! I’m sure I tried that before, but I think there was one additional missing piece.

In the front matter of the “Child Folder Item 1” file I had to change the “parent” property:

menu:
  nav:
    parent: child_folder1 <--- changed from "parent1"
    identifier: child_folder_item1
2 Likes