The Avonni Navigation provides horizontal and vertical menus to guide users.
Last updated
Was this helpful?
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.
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.
This section explains how to create dynamic navigation menus using record collection variables within your Flow. This is powerful for creating menus that adapt to your data.
When you use the "Variable" data source, the structure of your record collection in Flow Builder directly defines the navigation menu. Each record in the collection becomes a navigation item, and the fields of the record become the properties of that item (label, icon, etc.).
Your record collection variable must be a collection of records (e.g., a list of Accounts, Opportunities, or a custom object). You typically create this collection using a "Get Records" element in your Flow.
The following table shows how to map fields from your records to some of properties of your navigation items:
label
Name (e.g., Account Name)
Text
The text that appears on the navigation item. Use a text field from your record.
Yes
value
Id (e.g., Account ID)
Text (Record ID)
A unique identifier for the item. The Record ID is the best and safest choice. This is crucial for active item and visibility.
Yes
Must be unique. Using the Record ID ensures this.
items (for sub-items)
Another Record Collection Variable
(Record Collection)
A separate record collection variable in your Flow, containing records for the sub-items (see "Adding Sub-Items" below).
No
Only needed if you have submenus. This collection must have the same field structure as the main collection.
iconName
Icon_Field__c (Custom Field - Example)
Text
(Optional) A text field containing the name of an Avonni icon (e.g., "standard:account").
No
Refer to the Avonni Icon Library (link-to-icon-library). You might need to create a custom field on your object to store icon names.
disabled
Inactive__c (Custom Field - Example)
Boolean
(Optional) A checkbox (Boolean) field. If checked (true), the navigation item is disabled.
No
You might need to create a custom checkbox field on your object.
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.
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.
A common use case is to show or hide other components on the Flow screen based on the currently selected navigation item.
How: Use the output of the Navigation component to control the visibility of other components.
Select the component you want to conditionally display (e.g., an Avonni Map, a Data Table, an Input Field).
Go to its Set Component Visibility properties.
Set the condition Resource to the Navigation component's activeNavigationItemValue output attribute.
Set the Operator (e.g., Equals).
Set the Value to the specific value of the navigation item that should trigger the component's visibility.
Example: To show an Avonni Map component only when the "Location View" navigation item (with value = "locationView") is selected:
Select the Map component.
Set Visibility: Resource = Your_Navigation_Component_API_Name.activeNavigationItemValue, Operator = Equals, Value = locationView.
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 different actions, such as refreshing data or updating component values, based on the selected item
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 arrangement of the menu items.
Size: Precisely control the dimensions of the navigation menu by adjusting its width and height
.avif?alt=media&token=a8d525a9-6c4a-4b13-b560-78e5e802a80f)
