Community Builder: Custom Navigation with customizable menu items?

Question

I haven't been able to find any documentation on this anywhere, so maybe one of you can enlighten me. I've created a custom Navigation component, following this page:

https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_example_nav.htm

I have included this component in my header in the Community Builder in a "Customer Account Portal" themed community. It correctly reflects the navigation links as set up in the default Navigation Menu settings.

The problem is, there's no way to edit the links by clicking on the component itself in the builder. I have no earthly clue how to reference the default/global Navigation Menu settings in my design piece of the component.

For reference, I'm including pictures.

This is what shows up when I click on the default navigation in the builder. The red box in the image indicates what I want to show up in my custom navigation component's design.

This is what shows up when I click on my custom navigation in the builder. I also want my custom checkboxes to show up above the Edit Navigation Menu button.

Does anyone know if this is possible, and if so, how?

Answer 1

If my understanding is correct you have created multiple navigation menus and want to use them based on page variant.

In case that is the case please ref. this document

User subMenu: An optional property, which is an array of menu items.

<aura:iteration items="{!v.menuItems}" var="item" >
        <aura:if isTrue="{!item.subMenu}"> <!-- Here you can select a 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>

I think to select submenu based on user profile you can render different menus.

Please have a try and let me know if works.

P.S I didn't implement this yet just a ref from document.

Answer 2

As far as I know, you can't expose the Navigation Menus list as a design attribute. However, when using a custom component that extends forceCommunity:navigationMenuBase the Navigation Menu that will be used will be the Default Navigation.

Click on the Settings button in the Community Builder (the one that has a gear icon), then select Navigation and edit the Default Navigation.