Navigation
The Alert is also available as an Experience Cloud Component.
Overview
The Avonni Navigation component simplifies how you guide users through your Salesforce flows. With it, you can quickly build horizontal or vertical menus to help users move between screens clearly and organizedly. This makes your flows easier to use and allows users to find the necessary information.
Configuring the Navigation
The first step in creating your navigation menu is to decide what items you want to display. Then, head to the "Data Source" section to define and customize your navigation items.
Configuring the Data Source
The Data Source section is where you determine how your navigation items will be defined. You have three options.
| Data Source Type | Use Case | When to Use |
|---|---|---|
For a predefined set of items that don’t require dynamic updates. | Ideal for static content or rapid setup with specific items. | |
Dynamically displaying items based on variable collections in Salesforce. | Suitable when list content reflects changing data from Salesforce records. | |
Displaying a list of options defined in a Salesforce picklist. | Best for presenting a list of predefined options for selection. |
Adding sub-items
Adding sub-items (or submenus) to your Avonni Navigation component is a simple way to create organized, layered menus. This makes even complex navigation systems easy for your users to understand.
To add a submenu:
Go to the Data Source section of the Navigation component.
Select the main menu item you want to add a submenu to.
Click the "Add Item" button within the sub-items section.
Sub Items can only be added using the Manual and Variable Data Source.
Defining an icon
The Title Icon Name attribute lets you select an icon that can be added on the left side of the Navigation component.
Defining Navigation Item Value
The "Active Navigation Item Value" setting lets you choose which navigation item is currently visible to the user.
To set the correct active navigation item:
Look at the item you want to display.
Find the text value associated with that item.
Enter that exact text value into the "Active Navigation Item Value" field.
Make sure you type the text correctly, as even minor differences in spelling or capitalization will prevent the tab from being selected.
Example
For example, to set the "Blog Navigation" navigation item as the default focus when the component loads, copy the exact value you entered for the "blogNavigation" item and paste it into the "Active Navigation Item Value" attribute.
Defining the Orientation
Horizontal Orientation
Vertical Orientation
Adding other components
To include other components from your screen flow within specific navigation items, set a component visibility rule on the component you want to embed. Use the activeNavigationItemValue attribute from the Navigation component to determine when the embedded component should be displayed.
Adding Interactions
Interactions determine how the Navigation component responds to user actions. While you'll usually control actions through component visibility rules (see previous section), you can still add interactions directly to the component.
On Select: This event triggers when a user clicks on a menu item. You can use this to:
Navigate: Direct the user to a specific screen or flow when they click on an item.
Display a Toast: Show a brief notification message after a click.
Other Actions: You can also perform other actions, such as refreshing data or updating component values, based on the selected item
Most actions related to Navigation components (like showing or hiding content based on the selected item) are typically handled using component visibility rules. Refer to the previous section for more details on this approach.
Styling the navigation
The Style panel offers various options to personalize the look of your Avonni Navigation component:
Component Container
Border: Add and style a border around the entire navigation menu.
Size: Adjust the width and height of the menu container.
Background: Choose background colors for the menu.
Navigation Border: Style the border that separates the main menu items.
Navigation Items
Item: Customize the appearance of individual menu items, including font, size, and colors.
Sub Items Menu: Style the dropdown menus for sub-items, including their background and text.
Title: Customize the title's appearance if you have a title for your menu.
Label: Style the text labels for each menu item.
Overflow Button: If your menu has too many items to fit, customize the look of the buttons that allow scrolling.
Last updated