0

We have custom navigation bar in lighting community. Onclick of each tab we are navigating to different URLs. How to highlight active tab in custom navigation bar in lightning. Suppose if user clicks on My Training tab, My Training should be highlighted and user should know he under My Training tab. Below is my code.

Home

    <li class="no-sub" style="width: 170px;" onclick="{!c.menuClose}" >
        <a class="top-heading" href="{!$Label.c.SalesforceArticles}">Salesforce Articles </a>
    </li>
    <li class="no-sub" style="width: 170px;" onclick="{!c.menuClose}">
        <a class="top-heading" href="{!$Label.c.My_Training}">My Training</a>
    </li>
    <li class="no-sub" style="width: 170px;" onclick="{!c.menuClose}">
        <a class="top-heading" href="{!$Label.c.To_myTeam}">My Team</a>
    </li>
</ul>

Thanks, Anil Kumar

1 Answer 1

0

Instead of Hard-coding the menu items, I would suggest to create menu items from Standard Navigation Menu component from community builder and then create a custom component to override the standard Navigation.

customNavigation.cmp

<aura:component extends="forceCommunity:navigationMenuBase">
<div class="slds-grid slds-grid--vertical slds-navigation-list--vertical">
   <ul onclick="{!c.onClick}">
       <aura:iteration items="{!v.menuItems}" var="item">
           <li class="{!item.active ? 'slds-is-active' : ''}">
               <a href="javascript:void(0);" data-menu-item-id="{!item.id}" class="slds-navigation-list--vertical__action slds-text-link--reset">
                   {!item.label}
               </a>
           </li>
       </aura:iteration>
    </ul>
  </div>
</aura:component>

customNavigationController.js

({
onClick : function(component, event, helper) {
   var id = event.target.dataset.menuItemId;
   if (id) {
       component.getSuper().navigate(id);
    }
   }
})

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .