LWR Sites for Experience Cloud

LWR Sites for Experience Cloud
Get to Know the Template
Start Building Your LWR Site
Create an LWR Site
Create Custom Pages
Create Components for LWR Sites
Create Custom Layout Components
Set Up a Navigation Menu Using Apex
Publish Your LWR Site
Brand Your LWR Site
Create a Multilingual LWR Site (Beta)
Add Additional Customizations
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Set Up a Navigation Menu Using Apex

The Build Your Own (LWR) template doesn’t include a default Navigation Menu component. To set up a navigation menu, we recommend that you create a custom Lightning web component with an Apex controller to get the navigation items.

Step 1: Configure a Navigation Menu

To create a navigation menu in Experience Builder, go to Settings | Navigation, and click Add Navigation Menu. In the Menu Editor, you can add navigation items targeting specific sites pages.Menu Editor

Adding navigation items creates the NavigationLinkSet object and its corresponding NavigationMenuItems.

LWR templates (Build Your Own and Microsites) don’t include generic record pages. So if you create an object or global action type menu item that links to a Salesforce object, make sure that you also create the corresponding object pages. If you don't create the associated object pages, end users don’t see anything if they click the menu item.

Note

Step 2: Implement the Apex Controller

To fetch the navigation menu for your component, you can implement an Apex controller that uses the Connect API to get the NavigationMenuItems for the NavigationLinkSet you created in the Menu Editor.

See an example of this Apex controller in lightningNavigation/force-app/main/default/classes in the code sample files.

Tip

In the example, we pass in:
  • navigationLinkSetMasterLabel, or the menu name, to look up the NavigationLinkSet.DeveloperName for the nav menu of the current site
  • publishStatus to get the correct NavigationMenuItems for a published site or for a site in draft mode
  • addHomeMenuItem to determine whether the Home menu item must be included in the data
  • includeImageUrl to determine whether the data must include image URLs

Step 3: Implement the Navigation Menu Component

To implement your own Navigation Menu component, use the code samples provided.

See an example of a Navigation Menu component in lightningNavigation/force-app/main/default/lwc/navigationMenu in the code sample files.

Tip

Here are some pointers on how the sample component is set up.