Adding 'active' classes to parent nodes in a navigation list.

[aaronstezycki]

Hi all, I'm currently racking my brain with this one.

I'm using eleventyNavigation plugin and trying to create a 'bring your own html' navigation menu. I've started with the basic example given in the docs:

{% set navPages = collections.all | eleventyNavigation %}

{% macro renderNavListItem(entry) -%}
<li{% if entry.url == page.url %} class="is-active"{% endif %}>
  <a href="{{ entry.url }}">{{ entry.title }}</a>
{%- if entry.children.length -%}
  <ul class="subnav">
    {%- for child in entry.children %}{{ renderNavListItem(child) }}{% endfor -%}
  </ul>
{%- endif -%}
</li>
{%- endmacro %}

<ul>
    {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
</ul>

What I would like to generate is if you are within a section that has a parent is ...

<ul>
  <li><a>Home</a></li>
  <li class="has-subnav">
    <button class="dropdown">About</button>
    <ul class="subnav">
      <li><a>Company</a></li>
      <li><a>Team</a></li>
      <li><a>Careers</a></li>
    </ul>
  </li>
  <li class="has-subnav | is-active">
    <button class="dropdown">Work</button>
    <ul>
      <li class="is-active"><a>Ecommerce</a></li>
      <li><a>Portfolio</a></li>
      <li><a>Web App</a></li>
    </ul>
  </li>
</ul>

So effectively, I want the entire section sub tree to have an active class on them throughout the 'journey'. i.e the Work <ul> is active as well as the active e-commerce <li> *if i'm on the e-commerce page.

I've tried using combinations of querying if the page.url has the entry.parentKey within it, but varying degrees of success. Ive also tried querying the current pages tags against the entry.parentKey, and still no dice.

I can't really use a shortcode to transform it, as I've seen others do it that way, the code would end up very verbose as I'm using Alpine.js to add extra functionality to the menu.

[j-f1]

Support for it is very new and it isn‘t yet supported in Firefox, but you could instead use the :has selector, something like this:

.has-subnav:has(.is-active) {
  /* apply active styles ... */
}

[aaronstezycki]

That would solve the styling aspect... but I also need to add other conditional attributes based on the "active" states. Thanks for the suggestion though.

[aaronstezycki]

Trying to use a similar approach to #1580 by setting active if the page.url is similar to the entry.key

Using @pdehaan contains filter to match against the entry.key.

  eleventyConfig.addFilter("contains", (haystack=[], needle="") => {
    if (haystack != false)
    return haystack.some(hay => needle.includes(hay));
  });

but keep getting a 'needle.includes is not a function' template error.

{#- Pull development pages into a nav collection. -#}
{%- set devComponents = collections.all | eleventyNavigation("Elements") -%}

{% macro renderNavListItem(entry) -%}
<li{% if entry.url == page.url %} class="is-active"{% endif %}>
    <a>
        {{ 'Active: ' if entry.url == page.url or ['key'] | contains(page.url) else "Not Active:" }}
        {{ entry.title }}
    </a>
{%- if entry.children.length -%}
    <ul>
        {%- for child in entry.children %}
            {{ renderNavListItem(child) }}
        {% endfor -%}
    </ul>
{%- endif -%}
</li>
{%- endmacro %}

<ul>
    {%- for entry in devComponents %}
        {{ renderNavListItem(entry) }}
    {%- endfor -%}
</ul>

[aaronstezycki]

The reason this fails with 'needle.includes is not a function' is that some pages have "permalink: false" which sets the output path to false.

I just need to replace the ['key'] with something meaningful. I've tried using entry.key and that seems the obvious choice to check against, but it seems to fail with 'haystack.some is not a function' this time around.

[aaronstezycki]

I think I'm on the right direction here, but my lack of string/array knowledge is letting me down. entry.key is a simple string, whereas the filter is expecting an array. Simple way to change the filter so it accepts a string or an array?

[aaronstezycki]

Okay, so I think I have it.

{% set key = entry.key | lower | replace(" ", "") %} // normalise the key
{% set key = key.split(",") %} // turn it into an array

// Apply active state
{{ 'Active: ' if entry.url == page.url or key | contains(page.url) else "Not Active: " }}