Navigation
Last updated
Last updated
The Alert is also available as an Experience Cloud Component.
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.
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.
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 (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.
The Title Icon Name attribute lets you select an icon to be added to the left side of the Navigation component.
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.
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.
To show or hide other components on your screen based on the selected navigation item, set a visibility rule on those components. Use the activeNavigationItemValue attribute from the Navigation component to control when each component should appear.
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.
The Avonni Navigation component provides flexible options to create intuitive and visually appealing menus that enhance your application's user experience. Here's a breakdown of the styling features
Margin: Control the spacing around the entire navigation menu to position it correctly within your application's layout.
Padding: Adjust the menu container's inner spacing to fine-tune the menu items' arrangement.
Size: Precisely control the dimensions of the navigation menu by adjusting its width and height
