How to get navigation item active?

Need Help
#1

Hi everyone, hope someone can help with as I’m having a working but not sustainable solution for a navigation menu in the header.

I’ve been building the navigation based on a structural way from Tailor. It’s the one from the latest demo theme.

As you can see, a class active will be added based on the meta_title of the page.
This is far from ideal and therefore I looking for a sustainable solution. And hope one of you could help me out in this way.

Good to know is that most of my pages are build in Tailor (structural) way, similar to the menu.

Thanks!

CODE NAVIGATION

{% set activeNavLink = activeNavLink|default(this.page.id) %} {# leftover from demo theme #}
{% set items = menu.items.toNested %}
<script> 
    $('li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(0).fadeIn(500);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(0).fadeOut(500);
    });
</script>
{% for level1 in items %}
    {% set hasChildren = level1.children|length %}
    {% set isActive = level1.code|slug in this.page.meta_title|slug %}
    
    {% if level1.is_hidden == 1 %}
    {% else %}
        <li class="nav-item {{ hasChildren ? ' dropdown' }}">
            <a class="nav-link {{ isActive ? 'active' }} {{ hasChildren ? 'dropdown-toggle' }}"  href="{{ level1.reference|link }}"{% if hasChildren %} role="button" data-bs-toggle="dropdown" aria-expanded="false"{% endif %}>{{ level1.title }}</a>
            
            {% if hasChildren %} {# HAS CHILDREN IN LEVEL1 #}
                <ul class="dropdown-menu">
                    {% for level2 in level1.children %}
                        {% if level2.is_hidden == 1 %}
                        {% else %}
                            <li><a class="dropdown-item" href="{{ level2.reference|link }}">{{ level2.title }}</a></li>
                        {% endif %}
                    {% endfor %} {# END LOOP LEVEL2 #}
                </ul>
            {% endif %} {# END HASCHILDREN IN LEVEL1 #}
        </li>
    {% endif %} {# CHECK IF LEVEL1 IS_HIDDEN #}
{% endfor %} {# END LOOP LEVEL1 #}

MENUS.YAML

uuid: 85e471d2-09b9-4f3d-a63b-1ae9d92d2879
handle: Site\Menus
type: entry
name: Navigation
drafts: false
pagefinder: false

# navigation:
#     label: Menus
#     icon: icon-sitemap
#     order: 300

navigation:
  icon: icon-sitemap
  parent: Content\Page
  order: 20

customMessages:
    buttonCreate: New Navigation

fields:
    slug:
        label: Code
        column:
            label: Code
            invisible: false
        validation:
            - required
    items:
        label: Menu Item
        type: nesteditems
        span: adaptive
        maxDepth: 0
        customMessages:
            buttonCreate: Add Item
            titleCreateForm: Create Item
            titleUpdateForm: Edit Item
        form:
            fields:
                title:
                    label: Title
                    tab: Reference
                    default: New Menu Item
                    span: full
                    type: text
                    validation:
                        - required

                reference:
                    label: Reference
                    type: pagefinder
                    tab: Reference
            tabs:
                fields:
                    _menu_item:
                        type: mixin
                        source: Fields\MenuItem

PAGES.YAML

uuid: ed2e0305-5eeb-4654-9daf-0cc89f7961d8
handle: Content\Page
type: structure
name: Pages
drafts: true
multisite: sync
pagefinder: item

primaryNavigation:
  label: Content 
  icon: icon-file-text-o
  order: 90

navigation:
  icon: icon-file
  parent: Content\Page
  order: 1
  
customMessages:
  buttonCreate: New Page

structure:
    maxDepth: 3
    
fields:
    block_builder:
        type: mixin
        source: Page\Blocks
    
    hide_related:
        label: Hide Related Pages
        tab: Manage
        type: switch
        default: false

    SEO:
        type: mixin
        source: Seo\Seo
#2

This is possible with the following strategy:

  1. Add a “code” field to each menu item, or use the unique slug

  2. Use the resources component to set an “activeMenu” variable for each CMS page

[resources]
activeMenu = "active-slug"

Then in Twig

{{ if activeMenu == item.slug ? 'active' }}

You can also introduce activeSubMenu for submenu items.

I hope this helps.

#3

But this doesn’t work if we have one CMS page for all static content defined in Tailor.

url = "/static/:slug"
layout = "static"
title = "Static"
description = "Renders static pages"

[section item]
handle = "Content\Static"
identifier = "slug"
==
...