forceCommunity:navigationMenuBase

An abstract component for customizing the navigation menu in a community, which loads menu data and handles navigation. The menu’s look and feel is controlled by the component that's extending it.

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.

The menuItems attribute is automatically populated with an array of top-level menu items, each with the following properties:

id: Used by the navigate method.
label: The menu item’s display label.
subMenu: An optional property, which is an array of menu items.

Here's an example of a custom Navigation Menu component:

1<aura:component extends="forceCommunity:navigationMenuBase" implements="forceCommunity:availableForAllPageTypes">
2    <ul onclick="{!c.onClick}">
3        <aura:iteration items="{!v.menuItems}" var="item" >
4            <aura:if isTrue="{!item.subMenu}">
5                <li>{!item.label}</li>
6                <ul>
7                    <aura:iteration items="{!item.subMenu}" var="subItem">
8                        <li><a data-menu-item-id="{!subItem.id}" href="">{!subItem.label}</a></li>
9                    </aura:iteration>
10                </ul>
11            <aura:set attribute="else">
12                <li><a data-menu-item-id="{!item.id}" href="">{!item.label}</a></li>
13            </aura:set>
14            </aura:if>
15        </aura:iteration>
16    </ul>
17</aura:component>

Here's an example of a controller:

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})

Methods

navigate(menuItemId): Navigates to the page the menu item points to. Takes the id of the menu item as a parameter.

Attributes

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.

Lightning Components Developer Guide

forceCommunity:navigationMenuBase

Attributes