Set a menu value as active when iterating over the navigationMenuBase

Question

I'm attempting to build a lightning community and it requires that I use a custom navigation menu. I got all the elements to populate correctly but I can't figure out how to dynamically set the last selected menu item as active because the component reloads each time I navigate to a new page.

I am using aura:iteration to loop through the menuItems

<ul id="menuItems" onclick="{!c.onClickMenu}">
    <aura:iteration items="{!v.menuItems}" var="item" > 
        <li><a onload="{!c.setActive}" id="{!item.id}" data-menu-item-id="{!item.id}" href="">{!item.label}</a></li>       
    </aura:iteration>
</ul>  

Answer 1

This should work for you.

Trailhead Link: https://trailhead.salesforce.com/en/projects/communities_theme_layout/steps/nav_menu

Answer 2

Did you try using the indexvar thats part of aura iteration.

If the indexvar == iterationarray.length -1 means thats the last element.

So in your init function you can store the length of your array on an attribute and then in your li you can use a ternary for class like indexvar == iterationarray.length -1? active:'';

This is just pseudo code not the exact syntax