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:

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