How can I access menuItems from forceCommunity:navigationMenuBase?

Question

The documentation mentions there is a read-only attribute of menuItems. I am trying to access the label values of the menuItems, which are available in aura:iteration. I've tried:

component.get("v.menuItems") on init, which returns null.

Use-case: a custom vertical navigation menu, where I want to display the active menu item at the top of the list of a select element, as the first option. I am using a custom renderer currently, however it seems to be affecting the rest of the application and causing funky load behaviors of other components.

Answer 1

I would try using a change handler rather than the init handler as the v.menuItems may not be available on initialization of the component since they are provided from the Community JavaScript and are passed down from the extended component (forceCommunity:navigationMenuBase).

Example:

<!-- myNav.cmp -->
<aura:component extends="forceCommunity:navigationMenuBase" implements="forceCommunity:availableForAllPageTypes">

    <aura:handler name="change" value="{!v.menuItems}" action="{!c.handleMenuItemsChange}"/>

    <aura:iteration items="{v.menuItems}" var="item">
        <!-- menu items here -->
    </aura:iteration>

</aura:component> 

/* myNavController.js */
({
    handleMenuItemsChange : function(cmp, event, helper) {
        // access menu items when available
        var items = cmp.get('v.menuItems');
    }
})

Answer 2

I am not sure why you are not getting the menu items as they are passed value and is defined in the base class. Ideally, you should get it.

Also, what you are trying can be achieved without any renderer code and regardless of the approach you take, you will need to make sure that you reinstate the state back once the navigation finishes.

Step 1: Add an attribute for storing either selected menu items' label or ID. I have used the ID.

<aura:attribute name="currentSelectedId" type="String"/>

Step 2: Create two iterations:

<aura:if isTrue="{!item.id == v.currentSelectedId}">
    <aura:iteration items="{!item.menuItems}" var="subItem">
        <a class="slds-m-left--large" data-menu-item-id="{!item.id}"
           onclick="{! c.onClick }">{!item.label}</a>
    </aura:iteration>
</aura:if>
<aura:if isFalse="{!item.id == v.currentSelectedId}">
    <aura:iteration items="{!v.menuItems}" var="item">
        <a class="slds-m-left--large" data-menu-item-id="{!item.id}"
           onclick="{! c.onClick }">{!item.label}</a>
    </aura:iteration>
</aura:if>

Step 3: Add on click handler

 onClick: function (component, event) {
        event.preventDefault();
        let id = event.target.dataset.menuItemId;
        if (id) {
            component.set('v.currentSelectedId', id);
            component.getSuper().navigate(id);
            **// Store current Id somewhere in storage or cookie and read it on load.**
        }
    },