Step 4: Build a Vertical Navigation Menu

To add a vertical navigation menu to the sidebar, create a new component named verticalNav that extends the abstract forceCommunity:navigationMenuBase component.

1<aura:component extends="forceCommunity:navigationMenuBase">
2
3</aura:component>

The component automatically has access to the navigation menu items defined in the community’s Navigation Menu component. To see it working, create a quick unordered list of the navigation menu items.

1<aura:component extends="forceCommunity:navigationMenuBase">
2   <ul>
3       <aura:iteration items="{!v.menuItems}" var="item">
4           <li>{!item.label}</li>
5       </aura:iteration>
6   </ul>
7</aura:component>

This simple unordered list iterates through an array of menuItems, which is defined in the extended abstract component, and outputs <li> for each entry in the array.

To test the component, in the markup for condensedThemeLayout, add the component to the third column that has the placeholder comment for the navigation.

1<c:verticalNav></c:verticalNav>

When you refresh Experience Builder, you see the vertical navigation menu with bullet points for each menu item. It uses the same dataset that drives the default navigation menu in a community. For this example, you don’t want the vertical navigation menu to handle topic navigation. To remove the item, click the Navigation Menu button in the Settings | Theme area, and remove Topics from the navigation.

Now go back to the verticalNav menu and make it pretty. Here’s the code for the completed component.

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

The example takes advantage of aura expression syntax to do some nifty things. You can conditionally add the slds-is-active class to the list item depending on whether the item is active. You also set the data-menu-item-id to be the item’s unique ID, which you can use later to navigate to the corresponding item. In this way, you need only one click listener for the entire list, instead of adding one for each list item.

Add the click handler to the component’s controller method. Note the JavaScript syntax for accessing data attributes on HTML elements, which allows you to get that item’s ID.

1({
2   onClick : function(component, event, helper) {
3       var id = event.target.dataset.menuItemId;
4       if (id) {
5           component.getSuper().navigate(id);
6        }
7  }
8})

Add the following CSS rules to the theme layout component to remove unwanted margins and set the main content width.

1.THIS .slds-col .ui-widget {
2   margin: 16px 0;
3}
4 
5.THIS .slds-col.content {
6   width: 1140px;
7}

Lightning Communities Developer Guide

Step 4: Build a Vertical Navigation Menu