Extend the forceCommunity:navigationMenuBase component to create a customized navigation component for the Customer Service (Napili) or custom community templates. Provide navigation menu data using the menu editor in Community Builder or via the NavigationMenuItem entity.
Here's an example of a custom Navigation Menu component:
<aura:component extends="forceCommunity:navigationMenuBase" implements="forceCommunity:availableForAllPageTypes"> <ul onclick="{!c.onClick}"> <aura:iteration items="{!v.menuItems}" var="item" > <aura:if isTrue="{!item.subMenu}"> <li>{!item.label}</li> <ul> <aura:iteration items="{!item.subMenu}" var="subItem"> <li><a data-menu-item-id="{!subItem.id}" href="">{!subItem.label}</a></li> </aura:iteration> </ul> <aura:set attribute="else"> <li><a data-menu-item-id="{!item.id}" href="">{!item.label}</a></li> </aura:set> </aura:if> </aura:iteration> </ul> </aura:component>
Here's an example of a controller:
({ onClick : function(component, event, helper) { var id = event.target.dataset.menuItemId; if (id) { component.getSuper().navigate(id); } } })
navigate(menuItemId): Navigates to the page the menu item points to. Takes the id of the menu item as a parameter.
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
menuItems | Object | Automatically populated with menu item’s data. This attribute is read-only. |