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

Improve this question
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
    Commented Oct 18, 2018 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..
    – Subrat Panda
    Commented Oct 18, 2018 at 13:18
  • 1
    have you tried this? lightningdesignsystem.com/utilities/horizontal-list
    – AH3
    Commented Oct 18, 2018 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.
    – Subrat Panda
    Commented Oct 18, 2018 at 13:30
  • The issue is solved. w
    – Subrat Panda
    Commented Oct 18, 2018 at 13:34

2 Answers 2

Reset to default
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

Improve this answer
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>

Improve this answer

You must log in to answer this question.

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