[SalesForce] salesforce custom lightning Horizontal navigation

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.

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.

Best Answer

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>

Related Solutions

[SalesForce] Navigation in a Lightning App

You are probably going to want to use "events" to do this.

The approach I would consider comprises the following:

1) A Navigation component with links/buttons that fire a lightning event (this is your header)

2) The Lightning Event (a separate component - this is new to your setup)

3) A "body" component (could be one, or many) that listens for the events and changes its content dynamically (even dynamically loading other components) (this is probably your footer)

So (1) will be a component with some HTML markup including a navigation item like:

<li><a href="#" onclick="{!c.activitySelected}">Activity</a></li>

And in the component controller a method that [calls a helper method that] does:

    performActivitySelected : function() {
        var navSelected= $A.get("e.c:navSelected");
        navSelected.setParams({ "name" : "activity" });
        navSelected.fire();
    },

The navSelected var in that then references (2) which is this Lightning event (note: the name of the event component has to line up with the $A.get from above)

<aura:event type="APPLICATION" description="Event from nav">
<aura:attribute name="name" type="String"/>
</aura:event>

and then finally, in the "main" body / footer component (3) you want some markup in the component to listen to these events and change the "body" area like:

<aura:component >
    <aura:handler event="c:navSelected" action="{!c.onMenuItemSelected}"/>
    <div aura:id="displayPort"></div>
</aura:component>

In the controller then (and use the helpers appropriately to delegate this lark) use:

onMenuItemSelected : function(component, name) {
        $A.createComponent(
            "c:" + name,
            [],
            function(newComponent, status, statusDetail) {
                var content = component.find("displayPort");
                content.set("v.body", newComponent);
            }
        );
}

so when the component hears the Event being fired, it loads a component - in this case - with the given name and shoves it into it's body - but you can do anything you like from that point.

[SalesForce] Lightning Navigation API – PageReference to Lightning Page Not Working

Not sure what finally resolved this to be honest. Java case senstivity was true in the example I posted but I had that correct before and still failed. Might have been caching as I see after making changes to component have to wait a bit for them to propagate.

Best Answer

Related Solutions

[SalesForce] Navigation in a Lightning App

[SalesForce] Lightning Navigation API – PageReference to Lightning Page Not Working

Related Topic