[SalesForce] How to define which Navigation to use for a custom Navigation Menu component

My Community Site has two navigations. The "Default Navigation" which is used in the header, and also a "Footer" navigation used in the footer component. Both of them are custom, and inside of a "Build your Own" template.

I've used this trailhead module to create my own custom Lightning component, and have managed to get it working, but It's showing the "Default Navigation", and not the "Footer" as expected.

The component, FooterNavigation is inside of another component, the Footer component.

FooterNavigation.cmp

<aura:component extends="forceCommunity:navigationMenuBase">
    <div class="footer__navigation slds-m-vertical_medium">
        <aura:iteration items="{!v.menuItems}" var="item">
            <p>{!item.label}</p>
        </aura:iteration>
    </div>
</aura:component>

Footer.cmp

<aura:component>
    <footer class="slds-p-around_large">
        <div class="slds-container_x-large slds-container_center">
            <div class="slds-grid slds-wrap slds-gutters slds-grid_align-spread">
                <div class="slds-col slds-medium-order_2 slds-small-size_1-of-1 slds-medium-size_1-of-4 slds-clearfix">
                    <img src="{!$Resource.footerLogo}" class="slds-float_left" alt="Footer Logo" />
                </div>

                <div class="slds-col slds-medium-order_1 slds-small-size_1-of-1 slds-medium-size_3-of-4">
                    <c.FooterNavigation/>
                </div>
            </div>
        </div>
    </footer>
</aura:component>

The Footer component is called from a theme component, although I have tried adding the forceCommunity:themeLayout interface to both and I'd still get the same result.

My problem is that it is showing the "Default Navigation" and not the "Footer" navigation, is there a way that I can define it in the code?

I've tried looking around online on or off for several hours now and I can't find anything that defines it. So I have a feeling it might not be possible. But with the release of Winter 20, you can have multiple navigations, and define which one to use in the properties of the component – however, the page doesn't explain how a developer could integrate it.

Any help would be really appreciated and it would be a massive help.

Best Answer

Disclaimer: This solution covers undocumented properties of a standard lightning component so there is inherent risk that Salesforce might change the name of these properties in the future without notice. Please use this solution at your own discretion. https://developer.salesforce.com/docs/component-library/bundle/forceCommunity:navigationMenuBase/documentation

Solution - navigationLinkSetId attribute

You may specify the Navigation Link Set Id or developer name of the desired navigation menu in an attribute named "navigationLinkSetId" in a Lightning Component that extends forceCommunity:navigationMenuBase.

I would recommend using the developer name since the Id might change between environments. Both can be found using SOQL:

SELECT Id, DeveloperName, MasterLabel FROM NavigationLinkSet

Example:

Create a navigation menu titled "My Custom Navigation". The developer named will be "My_Custom_Navigation".

Update your component markup by including the new attribute:

<aura:component extends="forceCommunity:navigationMenuBase">
    <aura:attribute name="navigationLinkSetId" type="String" default="My_Custom_Navigation" />

    <div class="footer__navigation slds-m-vertical_medium">
        <aura:iteration items="{!v.menuItems}" var="item">
            <p>{!item.label}</p>
        </aura:iteration>
    </div>
</aura:component>

This will result in rendering the menu items defined in My Custom Navigation instead of Default Navigation.

Side note - Other undocumented attributes

There are a couple of other attributes that can be set in a similar fashion to configure your lightning component navigation menu further.

I have only listed the ones that I have confirmed working in api version 47.0.

addHomeMenuItem (Boolean)

A common use case would be to hide the Home menu item which cannot be achieved by using Community Builder since the option to remove it is disabled.

Set this attribute to false if you would like to hide the Home menu item.

menuItemTypesToSkip (String[])

An example use case would be to list internal and external links separately and/or together without creating multiple navigation menus.

Possible options to be delimited by a comma (,) are:

InternalLink
ExternalLink
GlobalAction
MenuLabel
NavigationalTopic
SalesforceObject

Related Solutions

[SalesForce] Lightning rerendering, inheritance, and forceCommunity:navigationMenuBase

Right, looks like you're right about the menuItem var not being available until some magic happens. A consistent way around this would be to check that v.menuItems is a length greater than 0 in the rerender method, so something like

rerender: function(component, helper) {
    var menuItems = component.get('v.menuItems');

    if (menuItems.length > 0) {
        //you're good to go with external JS DOM shenanigans
    }

    this.superRerender();
}

At this point it's reasonable to assume that:

External JS dependencies have been fully loaded
menuItems is populated
The navigation menu is 'ready' on the DOM

The 'dirty' part is where you have to call back to your external JS from Lightning- so you'll probably have to bind a function to the window.

Not to deviate too much from the original question- but this is the best way to work with external JS that requires the DOM to be 'ready'- have Lightning call a function on the window.

--- Edit for visibility ---

As mentioned in my comment below, I've tested the exact case on a Community, and confirmed that rerender is RELIABLY called when menuItems is populated from within a Community context, when implemented following the instructions.

Anyway:

rerender is called after menuItems is populated. There is no disputing this fact. This meets your use case of needing to reliably interact with the DOM when it's "ready".
In the initial part of your question, I noted that you had a variable in the Extension component that was local to it- and you were expecting a rerender to be called once GetHelloWorld initialises.

Unless you link the variable using the same parameter syntax as you do for the Composition component- it will remain LOCAL to the component. It doesn't get touched by ANY of your other components. It's not going to rerender.

--- Second edit ---

Well, looks like I got owned by Lightning, very very frightening again.

So- ignore everything I wrote above- here's what's happening:

rerender isn't called by default- I think the reason it was calling it on my org is due to the CSS classes being loaded via ltng:require.
v.menuItems isn't reliably populated even if rerender is called (I refreshed the page 2-3 times prior to writing the first edit, and walked off triumphant)
The valueChange event is useless because there's no render type event to signal that the menu is in the DOM
Lightning is horrible

Apologies if I got the wrong end of the stick earlier- it looks like you're plum out of luck if you're looking for a clean solution to manipulate the navigation menu post render. Suggest maybe using click event or CSS to achieve said effects?

[SalesForce] lightning:datatable actions menu is hidden

As it turns out the overflow properties had to be set to visible not just on the slds-scrollable_y class but also on the slds-scrollable_x class.

Problem solved.