Is/HasMenuCurrent for List of Content templates

support
1

I’ve setup a simple site that has a “content/post/” directory along with a nav-menu that has the word “Blog” displayed due to config.toml containing:

[[menu.main]]
name = "Blog"
identifier = "post"
url = "post/"

and

SectionPagesMenu = "main"

The nav bar is setup as

<nav class="nav-menu">
  <ul> 
     {{ range .Site.Menus.main }}
     <li class="{{ if or ($.IsMenuCurrent "main" .) ($.HasMenuCurrent "main" .) }}active{{ end }}">
       <a href="{{ .URL }}">{{ .Name }}</a>
     </li>
     {{ end }}
  </ul>
</nav>

Clicking on the “Blog” menu item takes you to the example.com/post/ listing page as expected. If I then click on any individual post which causes the layouts/post/single.html to load for that post, the “Blog” menu item gets the class=“active” set correctly.

However, if I visit the example.com/post/ url which causes the layouts/section/post.html (or if that is not defined _default/list.html) to be displayed, the “Blog” item is not highlighted.

Is there any way to have the nav menu mark the menu item as active (as happens via IsMenuCurrent/HasMenuCurrent for pages) when the auto generated listing page is showing for a given section?

2

The Is/Has methods for the list menu items uses the url to do the matching and may be tricky to get right (try “/post”).

Also, try to remove the menu entry in config and see if it starts working. SectionPagesMenu will create one for you.

3

Hi Bep,

I’ve tried with and without the [menu.main] entry to no avail. Having just SectionPagesMenu does create a menu entry, albeit with the name “Post” however there’s still no “active” highlighting in the /post/ list view, only once I’ve clicked on a specific post.

Using just /post for the link and/or menu url doesn’t impact the highlighting.

Is this likely a bug in Is/HasMenuCurrent or not supported? Any ideas how I could work around it either way?

4

Is your project available on Github or something similar? You lost me on your original post. Did you say that going to example.com/post/ gives you two different layouts depending on how you go there?

5

It’s not available online at the moment no.

What is happening is with the structure

content/post/
  firstpost.md
  secondpost.md

and the above menu settings. I get a menu entry “Post” displayed.

I have some css that underlines the list item if “active” is set as the class and the nav-menu partial sets active or not when it builds the menu using:

<nav class="nav-menu">
  <ul> 
     {{ range .Site.Menus.main }}
     <li class="{{ if or ($.IsMenuCurrent "main" .) ($.HasMenuCurrent "main" .) }}active{{ end }}">
       <a href="{{ .URL }}">{{ .Name }}</a>
     </li>
     {{ end }}
  </ul>
</nav>

So if I visit example.com I have a menu with a single item “Post” that is not active as expected. if I visit example.com/post/firstpost/ or example.com/post/secondpost/ the “Post” menu item gets the “active” class set and is underlined as expected.

This is because the individual posts cause IsMenuCurrent or HasMenuCurrent to return true.

However, when I click the “Post” menu item which takes me to example.com/post/ and displays a list of all current posts via the _default/list.html template. The “Post” menu item is not highlighted as both Is and HasMenuCurrent return false so it does not get the class=“active” set.

The same happens for any other content/section/ I visit. The actual sub-pages within a section correctly cause the menu item to be highlighted, but visiting the section itself which produces a list of items within the section, does not.

Is that any clearer?

6

I’ve worked around the issue for now. Rather than just the

content/post/
    content/post/firstpost.md
    content/post/secondpost.md

Structure, I’ve also added

content/post.md

and within post.md set the type to “post-list”, then added a Layouts/post-list/single.html which loops over all pages and if the Type == “post” displays the same information the autogenerated post listing would have.

By doing this, there’s an actual page for Content/post/ and one of the IsMenuCurrent/HasMenuCurrent functions now returns true for this and the menu item is highlighted.

Little bit more hassle to do this though as it will mean creating a page for each section and setting type to “sectionname-list” along with an extra folder in layouts for the section that recreates what was an autogenerated listing prior to this. As a workaround though, it seems ok.

7

Yes, this is much clearer, Gary. Thank you.

So, to summarize, it looks like if you use the _default/list.html template with IsMenuCurrent or HasMenuCurrent, those two functions never return true. If you build out your own non-default list template, it works correctly.

This sounds like a bug to me, but I’d have to do some digging to know for sure (I’ve not used the menu system in my projects yet). If you have time, it may be helpful to have a stripped down proof of concept project in Github that shows the broken behavior.

One simplification of your work-around is to remove post.md and move your list template to layouts/section/post.html. I’m curious if that also works.