Documentation
The Multi-Level Navigation Menu for Experience Cloud app offers components to manage multi-level navigation menus, and render them in your Experience Cloud site. You can configure up to 6 levels...
Multi-Level Navigation Menus for Experience Cloud
As of: Winter '25
Authored By: George Abboud
Last Updated: 10/10/2024
Table of Content
Description
The Multi-Level Navigation Menu for Experience Cloud app offers components to manage multi-level navigation menus, and render them in your Experience Cloud site. You can configure up to 6 levels of depth in your menus, control the look and feel with styling configuration, horizontal vs vertical presentation, language filtering support, and much more!
Disclaimer:
This package is free to use, but is not an official salesforce.com product, and should be considered a community project. The functionality is not officially tested or documented, and does not come with any support, warrantees, or updates. It is offered as-is.
AppExchange Listing URL
https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000FZbCXUA1
Open-Source Code
https://github.com/salesforce-experiencecloud/MultiLevelNavigationMenu
Features
Multi-level support for up to 6 levels deep
URLs - supports fully qualified and relative urls
Control whether each menu item opens in the same or a new window
Control whether each menu item is available for the public / guest / unauthenticated user
Support for languages and localization
Choose an icon for each menu item and control whether it is placed on the left or right of the label, or no icon at all
Option to use SLDS icons or Font Awesome
Export / Import menus for ease of maintenance and deployment from one org to another
Save / Load builder component configuration for ease of maintenance and deployment from one page, site, or org to another.
Display different types of menus:
Tree: A tree menu is list of items having an arrangement that resembles a tree and its branches.
Drilldown: A drill down menu is a multilevel menu system whose levels present in the same space, each one replacing another as called.
Mega: A Mega Menu is an expandable menu that displays navigation options to site visitors in a large, rectangular group.
Choose different modes to render the menu:
Horizontal First Level: The typical horizontal first level of menu items, with drop-downs when parent items with children menu items are clicked.
Apply Type to All Levels: No horizontal first level, all levels are rendered as the type chosen. If tree, all levels are rendered in a tree. If drilldown, all levels are rendered as drilldown. etc.
Hamburger: All menu levels are behind a hamburger icon - commonly used on mobile devices.
Hidden: Menu is hidden and not rendered.
Control type/mode combination by form factor (Desktop, Tablet, Mobile)
(Advanced) Configure Label and URL Substitutions Map to replace tokens you leave in menu item urls and labels, with the values specified in your map (including support for merge fields / data-binding, or the included data provider)
(Advanced) Use data-binding for dynamic menu loading, and Label and URL Substitution Map.
A breadth of granular styling controls. Colors and fonts inherit from DXP styling hooks, but the component provides controls to override with values that are specific to that component instance.
LWR Ready
Usage and Configuration
Experience Cloud Menus App (Menus Manager component for App Builder)
Access the Lightning App called “Community Menus” from the Lightning experience as an admin or a user who is given access to that app and underlying objects (ccnavmenus__Menu__c, ccnavmenus__Menu_Item__c). The home page of the app will run the Menus Manager component (menusManager), which uses an apex controller called “menusManagerController.cls”. Ensure that any user needing to run this functionality also has access to that apex class to be able to run the Menus Manager component.
When a menu is not selected, you will have two enabled buttons:
New Menu: Opens a modal in which you can create a new menu record (layout is based on assigned page layout)
Import Menu: Opens a modal in which you can select a .json file that you had previously exported, to import the menu based on
When a menu is selected, you will have a few addition buttons enabled:
Edit Menu: Opens a modal in which you can edit the selected menu record (layout is based on assigned page layout)
Delete Menu: Opens a modal in which you are asked to confirm the intent to delete the selected menu record. Note: This will also delete all child menu items
Export Menu: Prompts user to save a .json file that is an export of the selected menu in JSON format.
Create Menu Item: Opens a modal in which you are able to create a first-level menu item record (layout is hard coded and NOT based on page layout)
Manage Cache: Opens a modal in which you are able to manage Platform caching options for the menu. This requires the creation of a Platform Caching Org partition, which will then show up in the drop down to select the partition for the menu to be cached within, and enable caching. You can also configure the cache’s Time to Live in seconds. (Not to be confused with client-side caching, which is configurable in the property editor of the component in builder)
Creating menu items:
Create the first menu item by clicking Create Menu Item after a Menu is selected.
Create child menu items by clicking the arrow to the right of the parent menu item.
The position assigned to the menu item is always in relation to sibling menu items
If you want to setup an icon in the SLDS or Font Awesome icon Name, proceed as follows:
SLDS Icon: Choose icon from SLDS Icon Library and enter its value in the field. Example: “utility:home”
Font Awesome Icon: Choose icon from the Font Awesome library and enter its value in the field. Example: “fa-solid fa-building”
Using Translations:
There are 2 options for multi-lingual Nav Menus: 1. Create separate menu item per language or 2. Create a single menu with multiple languages
Using User Field Substitutions in Builder Component
The multi-level navigation menu also supports user field substitutions by defining the JSON substitution map (Label and URL Substition Map), optionally with one of the supported tokens below:
[@User.Id]
[@User.AccountId]
[@User.AccountName]
[@User.ContactId]
[@User.FirstName]
[@User.FirstInitial]
[@User.LastName]
[@User.LastInitial]
[@User.CommunityNickname]
For example, you might have a menu item defined with a url or label that contains your own token to be replaced with the user’s Id, such as:
URL: /profile/[user-Id]
Then you would have to define the Label and URL Substition Map under the Advanced Config section in the builder property panel.
Alternatively, If you’re doing this with code, you will need to construct a JSON object similar to the following:
[
{
"replaceThis": "[user-id]", //your custom token from the menu item
"replaceWith": "[@User.Id]" //from the supported tokens list in the component
}
]
You can follow the example above and modify it to replace with the user’s Account Id, Contact Id, First Name, Last Name, and Community Nickname.
Here’s an example of each:
[
{
"replaceThis": "[UserCommunityNickname]", //your custom token from the menu item
"replaceWith": "[@User.CommunityNickname]" //from the supported tokens list in the component
},
{
"replaceThis": "[UserLastName]",
"replaceWith": "[@User.LastName]"
},
{
"replaceThis": "[UserLastInitial]",
"replaceWith": "[@User.LastInitial]"
},
{
"replaceThis": "[UserFirstName]",
"replaceWith": "[@User.FirstName]"
},
{
"replaceThis": "[UserFirstInitial]",
"replaceWith": "[@User.FirstInitial]"
},
{
"replaceThis": "[User.Id]",
"replaceWith": "[@User.Id]"
},
{
"replaceThis": "[ContactId]",
"replaceWith": "[@User.ContactId]"
},
{
"replaceThis": "[AccountId]",
"replaceWith": "[@User.AccountId]"
},
{
"replaceThis": "[AccountName]",
"replaceWith": "[@User.AccountName]"
}
]
Navigation Menu component for Experience Builder
Navigation Menu Component Information
Component Label: Multi-Level Navigation Menu
Component Aura API Name: navMenu2
Component LWC API Name: nav-menu2
Component Namespace: ccnavmenus
Navigation Menu Component Properties
configJSONString
Aura Property API Name: configJSONString
LWC Property API Name: config-j-s-o-n-string
Type: String
Description: (required) JSON String representation of property configuration of the component. See Example and Details Below.
Inner Property Details
Path: general.menuName
Builder Label: Menu Name
Type: String, Accepted Values: Any valid menu name, or data binding expression that evaluates to a valid menu name.
Description: Name value or data binding expression that evaluates to a name value that matches one of the menus created.
Path: general.languageFilter
Builder Label: Language Filter
Type: Picklist (String), Accepted Values: ‘auto’, ‘none‘
Description: If 'auto' is chosen, for unauthenticated / guest users the language is populated based on the language picker component, otherwise for authenticated users the language is based on their language / locale selection in their user settings. If translation is not needed, set to 'none' value.
Path: general.
menuTypeDesktopBuilder Label: Menu Type - Desktop
Type: Picklist (String), Accepted Values: ‘tree’, ‘drilldown‘, ‘mega‘
Description: Choose menu type to render on desktop. Tree menu would expand like a tree where each parent expanded would show all the child items. Drilldown menu would show one level of menu items at a time, with option to go back up a level. Mega menu would unravel the entire menu with indentation for each level, and also show optional description of a menu item.
Path: general.
menuModeDesktopBuilder Label: Menu Mode - Desktop
Type: Picklist (String), Accepted Values: ‘horizontalFirstLevel’, ‘allLevels‘, ‘hamburger‘, ‘hidden‘
Description: Choose menu mode to render on desktop. Horizontal First Level (horizontalFirstLevel) will show the first level of the menu as a normal horizontal bar with drop downs for child items. Apply Type to All Levels (allLevels) would show all levels of the menu as the type selected, there would be no horizontal bar or hamburger icon. Behind Hamburger Toggle (hamburger) would show a hamburger icon, and the menu will only show when the icon is clicked. Hidden (hidden) will hide / not render the menu on the respective form factor.
Path: general.
menuTypeTabletBuilder Label: Menu Type - Tablet
Type: Picklist (String), Accepted Values: ‘tree’, ‘drilldown‘, ‘mega‘
Description: Choose menu type to render on tablet. Tree menu would expand like a tree where each parent expanded would show all the child items. Drilldown menu would show one level of menu items at a time, with option to go back up a level. Mega menu would unravel the entire menu with indentation for each level, and also show optional description of a menu item.
Path: general.
menuModeTabletBuilder Label: Menu Mode - Tablet
Type: Picklist (String), Accepted Values: ‘horizontalFirstLevel’, ‘allLevels‘, ‘hamburger‘, ‘hidden‘
Description: Choose menu mode to render on desktop. Horizontal First Level (horizontalFirstLevel) will show the first level of the menu as a normal horizontal bar with drop downs for child items. Apply Type to All Levels (allLevels) would show all levels of the menu as the type selected, there would be no horizontal bar or hamburger icon. Behind Hamburger Toggle (hamburger) would show a hamburger icon, and the menu will only show when the icon is clicked. Hidden (hidden) will hide / not render the menu on the respective form factor.
Path: general.
menuTypeMobileBuilder Label: Menu Type - Tablet
Type: Picklist (String), Accepted Values: ‘tree’, ‘drilldown‘, ‘mega‘
Description: Choose menu type to render on mobile. Tree menu would expand like a tree where each parent expanded would show all the child items. Drilldown menu would show one level of menu items at a time, with option to go back up a level. Mega menu would unravel the entire menu with indentation for each level, and also show optional description of a menu item.
Path: general.
menuModeMobileBuilder Label: Menu Mode - Mobile
Type: Picklist (String), Accepted Values: ‘horizontalFirstLevel’, ‘allLevels‘, ‘hamburger‘, ‘hidden‘
Description: Choose menu mode to render on desktop. Horizontal First Level (horizontalFirstLevel) will show the first level of the menu as a normal horizontal bar with drop downs for child items. Apply Type to All Levels (allLevels) would show all levels of the menu as the type selected, there would be no horizontal bar or hamburger icon. Behind Hamburger Toggle (hamburger) would show a hamburger icon, and the menu will only show when the icon is clicked. Hidden (hidden) will hide / not render the menu on the respective form factor.
Path: general.
cacheNameBuilder Label: Cache Name
Type: String, Accepted Values: AlphaNumeric text
Description: When Cache is enabled, client-side caching uses this name for the cache space.
Path: general.
cacheKeyBuilder Label: Cache Key
Type: String, Accepted Values: AlphaNumeric text
Description: When Cache is enabled, client-side caching uses this key to store menu in or retrieve menu from the cache space.
Path: general.
cacheEnabledBuilder Label: Cache Enabled?
Type: Boolean, Accepted Values: true, false
Description: When true and general.cacheName and general.cacheKey are valid values, this enables client-side caching in the user's browser.
Path: general.
debugModeBuilder Label: Debug Mode?
Type: Boolean, Accepted Values: true, false
Description: When true enables debugger statements and console logs from the component. Also prints out the configJSONString value below the menu to show the configuration values.
Path: general.
urlSubMapBuilder Label: Label and URL Substitution Map
Type: Object, Accepted Values: JSON representation of array of objects with “replaceThis” and “replaceWith” values.
Description: An object that represents an array of objects, each containing a “replaceThis” and a “replaceWith” value, which replaces the former value with the latter value.
Example:
[ {//example using the included user value provider within the menu component "replaceThis": "[name]", "replaceWith": "[@User.FirstInitial] [@User.LastName] LLC - " }, {//example using data binding "replaceThis": "[anotherToken]", "replaceWith": "{!Item.Custom_Field__c}" }, {//example using simple static hardcoded text "replaceThis": "[yetAnotherToken]", "replaceWith": "hardcoded-text" } ]
Path: labels.
overflowLabelBuilder Label: Overflow Label
Type: String
Description: When there are more menu items than can fit in the horizontal bar, an overflow menu item is created as the last item. This represents the label for that item.
Path: labels.
drilldownBackLabelBuilder Label: Drilldown Back Label
Type: String
Description: When the Drilldown menu type is selected, this represents the label for the button that takes the user up one level after they have drilled down to deeper levels.
Path: labels.
drilldownGotoLabelBuilder Label: Drilldown Goto Label
Type: String
Description: When the Drilldown menu type is selected, this represents the label for the button that navigates the user to the parent item if it is a valid link.
Path: styles.menuAlignment
Builder Label: Menu Alignment
Type: Picklist (String), Accepted Values: ‘left’, ‘center‘, ‘right‘
Description: Controls the alignment of the top-level container of the menu (i.e. the horizontal bar, hamburger icon, or when Apply Type to All Levels is chosen)
Path: styles.menuItemVerticalPadding
Builder Label: Menu Item Vertical Padding (in px)
Type: Number
Description: Number of pixels for vertical spacing. This number is divided in half to go to top and bottom. Example: a value of 20 will apply 10px to the top and 10px to the bottom.
Path: styles.sldsIconSize
Builder Label: SLDS Icon Size
Type: Picklist (String), Accepted Values: ‘0.5’, ‘0.75‘, ‘1‘, ‘1.25‘, ‘1.5’
Description: X-Small (0.5), Small (0.75), Medium (1), Large (1.25), X-Large (1.5) multiplied by the font size of the menu to control the height / width of SLDS Icons. Note: Font Awesome Icons are controlled purely by the font size.
Path: styles.iconSpacing
Builder Label: Icon Horizontal Spacing (in px)
Type: Number
Description: Number of pixels to set for horizontal spacing of all icons. If the icon is to the left, the spacing is applied to the right, and vice versa.
Path: styles.overrideFontFamily
Builder Label: Override Font Family
Type: String
Description: Overrides the font family inherited by the site theme
Path: styles.overrideFontSize
Builder Label: Override Font Size (in px)
Type: Number
Description: Font size in pixels to override with for Desktop / Tablet form factors.
Path: styles.overrideFontSizeMobile
Builder Label: Override Font Size Mobile (in px)
Type: Number
Description: Font size in pixels to override with for Mobile form factor.
Path: styles.overrideTextCase
Builder Label: Override Text Case
Type: Picklist (String), Accepted Values: ‘inherit’, ‘none‘, ‘capitalize‘, ‘uppercase‘, ‘lowercase’
Description: Override the text case of the menu items.
Path: styles.menuCSSClasses
Builder Label: Menu CSS Classes
Type: String
Description: Provide CSS class names to be able to target markup within the component specific to this instance of the component.
Path: styles.hideHamburgerMenuAnimation
Builder Label: Hide Hamburger Menu Animation
Type: Boolean, Accepted Values: true, false
Description: If true, hides the hamburger menu animation which occurs upon click.
Path: styles.topLevelItemSpacing
Builder Label: Horizontal Bar Menu Item Horizontal Spacing (in px)
Type: Number
Description: Number of pixels for horizontal spacing between menu items in the horizontal bar. This number is divided in half to go to left and right. Example: a value of 20 will apply 10px to the left and 10px to the right.
Path: styles.navContainerTextColor
Builder Label: For Top Level Container > Menu Item States > Default > Text Color
Type: String, Accepted Values: HEX color code
Description: HEX Color code for menu item text in containers, like horizontal bar, hamburger menu
Path: styles.navContainerBackgroundColor
Builder Label: For Top Level Container > Menu Item States > Default > Background Color
Type: String, Accepted Values: HEX color code
Description: HEX Color code for background color of containers, like horizontal bar, hamburger menu
Path: styles.navContainerAlsoApplyToSelectedState
Builder Label: For Top Level Container > Menu Item States > Active > Also Apply when Page URL Matches Menu Item URL
Type: Boolean, Accepted Values: true, false
Description: When true, the Active style configurations are also applied to menu items that match the current page that the user is on.
Path: styles.navContainerTextColorHover
Builder Label: For Top Level Container > Menu Item States > Active > Container Hover Text Color
Type: String, Accepted Values: HEX color code
Description: HEX Color code for menu item text in containers, like horizontal bar, hamburger menu
Path: styles.navContainerBackgroundColorHover
Builder Label: For Top Level Container > Menu Item States > Active > Horizontal and Hamburger Top-level Menu Hover Background Color
Type: String, Accepted Values: HEX color code
Description: HEX Color code for background hover color of containers, like horizontal bar, hamburger menu
Path: styles.navContainerBorderStyle
Builder Label: For Top Level Container > Menu Item States > Active > Border Style
Type: Picklist(String), Accepted Values: ‘none’, ‘dashed’, ‘dotted’, ‘double’, ‘groove’, ‘ridge’, ‘solid’
Description: Hover / Focus Border style for menu items in containers like horizontal bar, hamburger menu.
Path: styles.navContainerBorderDirection
Builder Label: For Top Level Container > Menu Item States > Active > Border Direction
Type: Object, Accepted Values: Array of strings that container a subset of the following values: ‘left‘, ‘right’, ‘top’, ‘bottom
Description: Hover / Focus Border direction for menu items in containers like horizontal bar, hamburger menu. Example:
[“top“, “bottom“, “left”, “right”]
Path: styles.navContainerBorderColor
Builder Label: For Top Level Container > Menu Item States > Active > Border Color
Type: String, Accepted Values: HEX color code
Description: HEX Color code for hover border color of menu items in containers like horizontal bar, hamburger menu
Path: styles.navContainerBorderWidth
Builder Label: For Top Level Container > Menu Item States > Active > Border Width (in px)
Type: Number
Description: Width in pixels for hover border of menu items in containers like horizontal bar, hamburger menu
Path: styles.navAllLevelBorderStyle
Builder Label: For All Other Levels > Border and Box Shadow > Border > Border Style
Type: Picklist(String), Accepted Values: ‘none’, ‘dashed’, ‘dotted’, ‘double’, ‘groove’, ‘ridge’, ‘solid’
Description: Border style for menu drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navAllLevelBorderColor
Builder Label: For All Other Levels > Border and Box Shadow > Border > Border Color
Type: String, Accepted Values: HEX color code
Description: Border color HEX code for menu drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navAllLevelBorderWidth
Builder Label: For All Other Levels > Border and Box Shadow > Border > Border Width (in px)
Type: Number
Description: Border width in pixels for menu drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navAllLevelBorderRadius
Builder Label: For All Other Levels > Border and Box Shadow > Border > Border Radius (in px)
Type: Number
Description: Border radius in pixels for menu drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navAllLevelShadowBoxType
Builder Label: For All Other Levels > Border and Box Shadow > Box Shadow > Box Shadow Type
Type: Picklist(String), Accepted Values: ‘none’, ‘outset’, ‘inset’
Description: Box Shadow style for menu drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navAllLevelShadowBoxColor
Builder Label: For All Other Levels > Border and Box Shadow > Box Shadow > Box Shadow Color
Type: String, Accepted Values: HEX color code
Description: Box Shadow color HEX code for menu drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navAllLevelShadowBoxXOffset
Builder Label: For All Other Levels > Border and Box Shadow > Box Shadow > Box Shadow X Offset (in px)
Type: Number
Description: Box Shadow X Offset in pixels for menu drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navAllLevelShadowBoxYOffset
Builder Label: For All Other Levels > Border and Box Shadow > Box Shadow > Box Shadow Y Offset (in px)
Type: Number
Description: Box Shadow Y Offset in pixels for menu drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navAllLevelShadowBoxBlur
Builder Label: For All Other Levels > Border and Box Shadow > Box Shadow > Box Shadow Blur Distance (in px)
Type: Number
Description: Box Shadow Blur Distance in pixels for menu drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navAllLevelShadowBoxSpread
Builder Label: For All Other Levels > Border and Box Shadow > Box Shadow > Box Shadow Spread Distance (in px)
Type: Number
Description: Box Shadow Spread Distance in pixels for menu drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navTextColor
Builder Label: For All Other Levels > Menu Item States > Default > Text Color
Type: String, Accepted Values: HEX color code
Description: HEX code for default text color of menu items in drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navBackgroundColor
Builder Label: For All Other Levels > Menu Item States > Default > Background Color
Type: String, Accepted Values: HEX color code
Description: HEX code for default background color of menu items in drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navAlsoApplyToSelectedState
Builder Label: For All Other Levels > Menu Item States > Active > Background Color
Type: Boolean, Accepted Values: true, false
Description: When true, the Active style configurations are also applied to menu items that match the current page that the user is on, in drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navTextColorHover
Builder Label: For All Other Levels > Menu Item States > Active > Text Hover Color
Type: String, Accepted Values: HEX color code
Description: HEX code for text color of active menu items in drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navBackgroundColorHover
Builder Label: For All Other Levels > Menu Item States > Active > Background Hover Color
Type: String, Accepted Values: HEX color code
Description: HEX code for background color of active menu items in drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navBorderStyle
Builder Label: For All Other Levels > Menu Item States > Active > Border Style
Type: Picklist(String), Accepted Values: ‘none’, ‘dashed’, ‘dotted’, ‘double’, ‘groove’, ‘ridge’, ‘solid’
Description: Border style for active menu items in drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navBorderDirection
Builder Label: For All Other Levels > Menu Item States > Active > Border Direction
Type: Object, Accepted Values: Array of strings that container a subset of the following values: ‘left‘, ‘right’, ‘top’, ‘bottom
Description: Border direction for active menu items in drop-down containers or when "Apply Type to All Levels" are chosen. Example:
[“top“, “bottom“, “left”, “right”]
Path: styles.navBorderColor
Builder Label: For All Other Levels > Menu Item States > Active > Border Color
Type: String, Accepted Values: HEX color code
Description: Border color HEX code for active menu items in drop-down containers or when "Apply Type to All Levels" are chosen
Path: styles.navBorderWidth
Builder Label: For All Other Levels > Menu Item States > Active > Border Width
Type: Number
Description: Border width in pixels for active menu items in drop-down containers or when "Apply Type to All Levels" are chosen
Example configJSONString
{
"general": {
"languageFilter": "auto",
"menuTypeDesktop": "tree",
"menuModeDesktop": "horizontalFirstLevel",
"menuTypeTablet": "mega",
"menuModeTablet": "horizontalFirstLevel",
"menuTypeMobile": "drilldown",
"menuModeMobile": "horizontalFirstLevel",
"cacheEnabled": false,
"debugMode": true,
"menuName": "IMCD",
"urlSubMap": [
{
"replaceThis": "[name]",
"replaceWith": "[@User.FirstInitial] [@User.LastName] LLC - "
}
],
"cacheName": "ccnavmenus",
"cacheKey": "testmain"
},
"labels": {
"overflowLabel": "More",
"drilldownBackLabel": "Back",
"drilldownGotoLabel": "Go to"
},
"styles": {
"menuAlignment": "center",
"topLevelItemSpacing": 100,
"hideHamburgerMenuAnimation": false,
"overrideTextCase": "inherit",
"navContainerTextColor": "#FEF7F7",
"navContainerTextColorHover": "#01592D",
"navContainerBackgroundColor": "#00763B",
"navContainerBackgroundColorHover": "#BDF0D6",
"navBackgroundColor": "#BDF0D6",
"navTextColor": "#E40909",
"navBackgroundColorHover": "#01592D",
"navTextColorHover": "#FEF7F7",
"navContainerAlsoApplyToSelectedState": true,
"navContainerBorderStyle": "dotted",
"navContainerBorderWidth": 3,
"navAlsoApplyToSelectedState": true,
"navContainerBorderDirection": [
"top",
"bottom",
"left",
"right"
],
"navContainerBorderColor": "#FF0000",
"navBorderStyle": "double",
"navBorderWidth": 6,
"navBorderColor": "#FF27DE",
"navBorderDirection": [
"left",
"right"
],
"navAllLevelBorderStyle": "solid",
"navAllLevelBorderWidth": 6,
"navAllLevelBorderColor": "#006FFF",
"navAllLevelShadowBoxType": "none",
"navAllLevelShadowBoxXOffset": 1,
"navAllLevelShadowBoxYOffset": 1,
"navAllLevelShadowBoxBlur": 10,
"navAllLevelShadowBoxSpread": 1,
"navAllLevelShadowBoxColor": "#DD1111",
"menuItemVerticalPadding": 50,
"sldsIconSize": "1",
"overrideFontSizeMobile": 13,
"overrideFontSize": 20,
"iconSpacing": 20,
"navContainerBorderRadius": 0,
"navAllLevelBorderRadius": 0
}
}(Deprecated) Navigation Menu component for Experience Builder
Navigation Menu Component Information
Component Label: (deprecated) Multi-Level Navigation Menu
Component Aura API Name: navMenu
Component LWC API Name: nav-menu
Component Namespace: ccnavmenus
Navigation Menu Component Properties
Menu
Aura Property API Name: menuId
LWC Property API Name: menu-id
Type: String
Description: (required) Choose which menu to display. If "[Name Filter]" is chosen, you have to provide a matching value in the Name Filter property to match the Menu record's Name field. Defaults to "[Name Filter]"
Name Filter
Aura Property API Name: nameFilter
LWC Property API Name: name-filter
Type: String
Description: (optional) Provide a value to match a menu's Name on. The value can be hardcoded, or a merge field such as {!recordId}, {!recordName} {!urlParameter}. Using merge fields can facilitate creating dynamic menu's based for pages with dynamic variables.
Menu Alignment
Aura Property API Name: menuAlignment
LWC Property API Name: menu-alignment
Type: String
Description: (required) Horizontal Alignment of Navigation Bar. Choices are: Left, Center, Right. Default: Left
Menu Mode
Aura Property API Name: menuMode
LWC Property API Name: menu-mode
Type: String
Description: (required) Default Drop Down Menu that keeps all items open, or Drill Down that hides other menu items except what is currently active. Choices are: Default, Drill Down. Default: Default
Vertical Mode
Aura Property API Name: verticalMode
LWC Property API Name: vertical-mode
Type: String
Description: (vertical) On to force vertical mode always, off to never render vertical mode, mobile only to render on mobile. Choices are: mobile-only, on, off
Default: mobile-only
Hamburger Menu Mode
Aura Property API Name: hamburgerMenuMode
LWC Property API Name: hamburger-menu-mode
Type: String
Description: (required) Mode for when to hide menu behind hamburger. Defaults to 'mobile-only' which will render a hamburger menu only on mobile devices. 'on' will render a hamburger menu all the time. 'off' will never render a hamburger menu. Hamburger menu will take precedence over vertical mode.
Hide Hamurger Menu Animation
Aura Property API Name: hideHamburgerMenuAnimation
LWC Property API Name: hide-hamburger-menu-animation
Type: Boolean
Description: Hide or show hamburger menu / close button animations.
Language
Aura Property API Name: language
LWC Property API Name: language
Type: String
Description: (required) Provide a language to filter menu on. If 'auto' is chosen, for unauthenticated / guest users the language is populated based on the language picker component ('language' url parameter), otherwise for authenticated users the language is based on their language / locale selection in their user settings. If translation is not needed, set to 'none' value. Valid options are "none", "auto"
Overflow Label
Aura Property API Name: overflowLabel
LWC Property API Name: overflow-label
Type: String
Description: (required) Text to display for the overflow menu item. Default: More
DrillDown Back Label
Aura Property API Name: drillDownBackButtonLabel
LWC Property API Name: drill-down-back-button-label
Type: String
Description: Label to display for the back button in drill down menu. Default: Back
DrillDown Go To Label
Aura Property API Name: allLabel
LWC Property API Name: all-label
Type: String
Description: Label to display for going to menu item that has children and is linked. Default: Go to
Override Navigation Text Color
Aura Property API Name: brandNavigationColorText
LWC Property API Name: brand-navigation-color-text
Type: String
Description: (optional) Provide color code to override the Navigation Text Color inherited from the theme
Override Navigation Bar Background Color
Aura Property API Name: brandNavigationBarBackgroundColor
LWC Property API Name: brand-navigation-bar-background-color
Type: String
Description: (optional) Provide color code to override the Navigation Bar Background Color inherited from the theme
Override Navigation Background Color
Aura Property API Name: brandNavigationBackgroundColor
LWC Property API Name: brand-navigation-background-color
Type: String
Description: (optional) Provide color code to override the Navigation Background Color inherited from the theme
Override Font Family
Aura Property API Name: fontFamily
LWC Property API Name: font-family
Type: String
Description: (optional) Provide Font Family to override the Font Family inherited from the theme
Override Text Case
Aura Property API Name: textTransform
LWC Property API Name: text-transform
Type: String
Description: (optional) Provide Text Case to override the Text Case inherited from the theme. Valid values are: "inherit", "none", "capitalize", "lowercase". The default value is "inherit"
Top Level Item Spacing
Aura Property API Name: topLevelItemSpacing
LWC Property API Name: top-level-item-spacing
Type: Integer
Description: (required) Set spacing in pixels between Top Level Menu Items.
Menu Style Classes
Aura Property API Name: navMenuClassNames
LWC Property API Name: nav-menu-class-names
Type: String
Description: (optional) Class names to uniquely target a menu's styles.
URL Substition Map JSON
Aura Property API Name: urlSubMapJson
LWC Property API Name: url-sub-map-json
Type: String
Description: (optional) Provide a JSON map for substituting tokens in menu item url fields with the replacement values defined in the map being passed.
Example: [{"replaceThis":"[!recordId]", "replaceWith":"{!recordId}"}]
This would replace urls that have [!recordId] in them, with the value of the recordId on a page that has that recordId populated.
Manage Cache
Aura Property API Name: menuCache
LWC Property API Name: menu-cache
Type: String
Description: (optional) Provide a JSON representation of the client-side cache configuration object to, including values for cacheName (String), cacheKey (String), and cacheEnabled (Boolean). cacheName and cacheKey must be alphanumeric values. (Not to be confused with the Platform cache option, which happens on the server side)
Example {"cacheName":"ccnavmenus", "cacheKey":"mainsitenav", "cacheEnabled":true}
If configured and enabled, this will cache the menu in users’ browser cache for quick retrieval.
Debug Mode
Aura Property API Name: debugMode
LWC Property API Name: debug-mode
Type: Boolean
Description: Uncheck when not debugging. If checked, console logs and debugger statements in the code will execute and show in browser developer tools console.
Vertical? (Deprecated)
Aura Property API Name: isVertical
LWC Property API Name: is-vertical
Type: Boolean
Description: If checked (true) the menu will render in vertical (tree) mode, otherwise it renders horizontally. Defaults to false and renders horizontally.
Sharing, Access, and Security Requirements
The Multi-Level Navigation Menu lightning component and underlying data model follow the Salesforce platform’s security and sharing concepts.
In order for a user to be able to run the component, the user has to be granted access to the Apex Controller “ccnavmenus__menusController” (either via profile or permission set).
Since the apex controller runs in “with sharing” mode, in order for the user to be able to successfully query and render a menu, the following needs to occur:
The user must be granted “Read” CRUD permission to both the “Menu” and “Menu Item” objects (either via profile or permission set).
The user must be granted “Read” FLS permission to all fields on both the “Menu” and “Menu Item” objects.
The user must be granted “Read” access to the “Menu” records that you want them to be able to render on the Experience Cloud site. For guest (unauthenticated) users, you will need to create Guest User Sharing Rules to open up access to “Menu” records. For authenticated users, you will need to share the “Menu” records in one of the many options you have on the platform to do so.
Usage Example in Aura
<ccnavmenus:navMenu2
configJSONString="{v.configJSONString}"
/>
Create a JSON string property in the controller similar to the examples in the sections above, and pass it into the component.
Usage Example in Aura for Deprecated Component
<ccnavmenus:navMenu
menuId="a005w00000bz2FQAAY"
nameFilter=""
isVertical="{!v.isVertical}"
language="none"
hamburgerMenuMode="mobile-only"
urlSubMapJson="{!v.urlSubMapJson}"
brandNavigationColorText="rgba(255,255,255,1)"
brandNavigationBarBackgroundColor="rgba(255,255,255,1)"
brandNavigationBackgroundColor="rgba(255,255,255,1)"
fontFamily="Salesforce Sans"
textTransform="uppercase"
topLevelItemSpacing="20"
/>
Limitations
From a declarative perspective, this component cannot be used to swap out the nav menu in the header from theme settings. This is due to the unavailability of a nav menu interface to implement that would allow for such a swap. The availability of this interface is currently not on the product roadmap.
From a development perspective, including this component in a custom LWC behaves differently, depending on if you’re using your custom component in LWR vs Aura Runtime. In LWR, you can use a custom LWC which includes the “ccnavmenus-nav-menu2”. On the other hand, in Aura Runtime you cannot use a custom LWC that includes other LWCs from different namespaces due to Locker Service limitations.
The largest menu size tested is around 750 menu items and that caused the menu manager to become a bit sluggish in reacting to changes and updates. So it’s likely that menus beyond a size of 750 menu items would not be supported by the app.
Un-Limitations (Use Cases)
This component can be called in the markup of any Aura lightning component. An Aura lightning component serving as a custom theme layout would make it possible to swap out the standard navigation menu with this navigation menu component instead.
This component can be dragged / dropped into a “shared” header region of the theme, declaratively, if such a region is available in the selected theme.
This component can be dragged / dropped into any page in builder to be used at a page level if needed.
Screenshots & Videos
