Set navigation menu item to active for child pages

Question

Currently we're highlighting the active page in our navigation by having a structure of menu items with a "menuLink" field and comparing that to the current entry uri. Something like this:

{% nav link in Menu %}
    <li>
        {% if link.menuLink|length %}
            <a{% if link.slug == entry.uri %} class="active"{% endif %} href="{{ link.menuLink[0].url }}">{{ link.title }}</a>
        {% else %}
            <a href="{{ link.customUrl }}">{{ link.title }}</a>
        {% endif %}
    </li> 
{% endnav %}

However, this doesn't work for children of structures or channels. We could change the if statement to look for the entry.uri OR the entry.section as below but obviously that only works if the section/channel has the same name as the link.slug:

{% if link.slug == entry.uri or link.slug == entry.section %} class="active"{% endif %}

I searched through the previous questions but all the answers to this problem seem to involve reading a section of the URL but we want to be able to control the URLs and have some structure children have a top level URL rather than a /structure-name/{slug}

If we could have a field on the structure itself to say which menu item to highlight then you could just say something like

if entry.section.type == channel or structure then active menu item = entry.section.menuItem 

but you can't have a field on a structure/channel as far as I'm aware?

Does anyone know of a way of solving this problem without the use of URL segments?

Answer 1

Try using:

   {% set pageIsActive = (page.id == entry.id) %}

and then testing for that in your if statements.

This article covers pretty much every eventuality when it comes to classes and navigation and should help you achieve the markup you are after.