How can I define which Navigation to use for a custom Navigation Menu component?

Question

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.

Answer 1

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

Answer 2

Solved!

Essentially, I got rid of forceCommunity:navigationMenuBase - and wrote an Apex class which gets the Footer navigation for me.

I totally understand that this probably isn't the best way to do this, but this has worked for me, and hopefully will work for some other people too.

FooterNavigation.cmp

<!-- `extends="forceCommunity:navigationMenuBase"` has been removed, and I added a controller attribute of the `Navigation` controller. -->
<aura:component controller="Navigation">
    <!-- Since I've removed the `navigationMenuBase` interface, I've added the `menuItems` variable as an attribute here. -->
    <aura:attribute name="menuItems" type="NavigationMenuItem"/>

    <!-- With me using a controller, I need to initialise it on the component load. -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <div class="footer__navigation slds-m-vertical_medium">
        <aura:iteration items="{!v.menuItems}" var="item">
            <p>{!item.Label}</p> <!-- There is a capital "L" here now. -->
        </aura:iteration>
    </div>
</aura:component>   

FooterNavigationController.js

({
    doInit : function(component, event, helper) {
        // Define the method we'd call in the Apex controller.
        var action = component.get("c.getFooterNavigation");

        // Configure the callback/response
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS") {
                var response = response.getReturnValue();

                // Set the `menuItems` variable back in the component.
                component.set("v.menuItems", response);
            } else {
                console.log('Problem getting footer navigation, response state: ' + state);
            }
        });

        // Run the action.
        $A.enqueueAction(action);
    }
})

Navigation.cls

public with sharing class Navigation {
    @auraEnabled
    public static List<NavigationMenuItem> getFooterNavigation() {
        // Get the LinkSet - in this case I need the "Footer".
        NavigationLinkSet linkSet = [SELECT Id FROM NavigationLinkSet WHERE MasterLabel = 'Footer'];

        // Get a list of `NavigationMenuItem` that are 'Live' and have a `NavigationLinkSetId` equal to the `id` of the one returned earlier.
        List<NavigationMenuItem> reg = new LIST<NavigationMenuItem>();
        reg = [SELECT Label, NavigationLinkSetId, Target, Status FROM NavigationMenuItem WHERE Status = 'Live' AND NavigationLinkSetId = :linkSet.Id ];  
        return reg;
    }
}

This admittedly isn't the perfect solution, in order to view the changes to a menu item in the Community Builder you'd need to publish the site. However, this does solves my problem of having multiple navigation menus on the site.