Navigation Menu Base | Legacy Components | Lightning Component Reference

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.

For Use In

Experience Builder Sites

Extend the forceCommunity:navigationMenuBase component to create a customized navigation component for the Customer Service template or custom Experience Builder templates. Provide navigation menu data using the menu editor in Experience 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.

The navigationLinkSetId attribute takes the ID or Developer Name of the NavigationLinkSet to be rendered in the component.

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

Attributes

Name	Description	Type
body	The body of the component. In markup, this is everything in the body of the tag.	Aura.Component[]
menuItems	Automatically populated with menu item’s data. This attribute is read-only.	Object
navigationLinkSetId	The NavigationLinkSet this component renders. If left blank, the default link set is used. This could be ID or Developer Name.	String

Methods

Name	Description	Argument Name	Argument Type	Argument Description
navigate	Navigate to a community page described by menu item.	menuItemId	String	Id of the menu item to navigate to.