Navigation in Lightning communities

In a recent project we had to design navigation in a Lightning community. This is what we learned along the way.

Beyond the menu

When you pick a Lightning Template you will have a build in menu navigation. This works well if all menu items are meant for all users (no assignment of audience), but breaks down for more sophisticated or programmatic navigation.

On first view the Lightning navigation service (available in Aura or LWC) seems like the answer. However on inspection of lightning-navigation you find as supported experiences only Lightning Experience and Salesforce mobile app, Communities are missing.

Digging a little deeper and checking the Page Reference Types, you will find "limited support for Communities". I tested it out, here are my findings:

• The documentation is accurate. What is stated as working works, what is stated as not supported in communities does not work.
• The painfully missing piece is standard__component which would allow to navigate to a custom lightning component. It is the only component that supports state (more on that later)
• Navigate to standard__objectPage opens the list/page layout based on the user's profile. When you specify. actionName="new", the standard object detail page will open. It will not use an eventual define new button overwrite
• Works as specified: standard__recordPage, standard__knowledgeArticlePage
• Doesn't work: standard__webPage
• None of the navigation working in communities supports the state properties
• The most interesting navigation in communities is standard__namedPage. Beside the predefined default pages "Home","Account management", "Contact Support", "Error", "Top Articles" and "Topic Catalog", it supports "Custom Pages". In other words: any of the pages you have created in your community. So the missing standard_component can be mitigated by embedding it into a custom page. Keep in mind: the pageName property is the URL, not the name.

Transferring state

As mentioned above, the state property gets ignored, dropped without an error when used with any of the working navigation items. The remedy for that is to use the session store. An Aura code snippet would looks like this:

function(component, event, helper) {
    event.preventDefault();
    var navService = component.find("navService");
    var pageReference = {
        type: "standard__namedPage",
        attributes: {
            pageName: "some-page-name"
        },
        state: {
            bingo: true,
            answer: 42,
            tango: "double"
        }
    };
    sessionStorage.setItem('localTransfer', JSON.stringify(pageReference.state));
    navService.navigate(pageReference);
}

I left the state in the pageReference JSON object to show that it doesn't harm. The navService component is defined as <lightning:navigation aura:id="navService"/> in Aura. On the receiving end you use:

var localStuff = sessionStorage.getItem('localTransfer');
if (localStuff) {
 var state = JSON.parse(localStuff);
 // Do the needed stuff here
}

As usual YMMV