1

I am working on a requirement now to develop a custom component for navigation menu. We are using custom "Build Your Own" Community Template . And the standard navigation (Horizontal) is not available in drag and drop . I need to replicate the navigation bar as below. Expected Result

I am using the below code

<aura:component extends="forceCommunity:navigationMenuBase" implements="forceCommunity:availableForAllPageTypes" access="global">
   <div class="slds-grid slds-grid--horizontal slds-navigation-list--horizontal">
       <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>

I am getting the result as below. Is there anything I am missing to . Is it possible to make the navigation menus be visible side-by-side. Result I am getting

5
  • what is your question? -- 'Is there anything I am missing to '? can you expand on what the expected behavior you want is adn what problem you are facing? as per 'Is it possible to make the navigation menus be visible side-by-side. ' not sure this is possible
    – glls
    Oct 18 '18 at 13:15
  • I am trying to make the navigation Horizontal instead of vertical. As in the first Image. I want to know is this possible meaning putting the menu Items side-by-side.. If it is what I need to change in the above mentioned code.. Oct 18 '18 at 13:18
  • 1
    have you tried this? lightningdesignsystem.com/utilities/horizontal-list
    – AH3
    Oct 18 '18 at 13:19
  • Yes I tried that even earlier with Below sample code <aura:component extends="forceCommunity:navigationMenuBase" implements="forceCommunity:availableForAllPageTypes" access="global"> <div class="slds-list_horizontal"> <aura:iteration items="{!v.menuItems}" var="item"> </aura:iteration> <ul class="slds-list_horizontal"> <li>Home</li> <li>Menu1</li> <li>Menu2</li> </ul> </div> </aura:component> I am able to see the Items which I have supplied in <ul></ul> But the Iteration Items are blank. Oct 18 '18 at 13:30
  • The issue is solved. w Oct 18 '18 at 13:34
2

What you need here is the appropriate SLDS class to be able to render your list items horizontally.

Add the Horizontal List SLDS class where you are rendering your list, and that should work. Your code should look like as below.

<ul class="slds-list_horizontal" onclick="{!c.onClick}">
    ....
</ul>

A sample code and its output for reference.

<ul class="slds-list_horizontal">
    <li>Menu1&nbsp;</li>
    <li>Menu2&nbsp;</li>
    <li>Menu3&nbsp;</li>
</ul>

enter image description here

0

I am able to get the menu in Horizontal order by making the below changes<aura:component extends="forceCommunity:navigationMenuBase" implements="forceCommunity:availableForAllPageTypes" access="global"> <div> <ul class="slds-list_horizontal"> <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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.