Navigation
The Avonni Navigation provides horizontal and vertical menus to guide users.
The Avonni Navigation renders a horizontal or vertical menu with customizable items. It is most commonly used to show or hide other components on the same Flow screen based on the currently selected menu item — making it the building block for tabbed or multi-view layouts.
Overview
A common use case is to show or hide other components on the Flow screen based on the currently selected navigation item.
How to control component visibility:
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
activeNavigationItemValueoutput attribute.Set the Operator (e.g.,
Equals).Set the Value to the specific
valueof 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.
Configuration
To configure it, click the component on the Flow screen. The Edit Navigation Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Data Source
The Data Source setting determines how navigation items are defined.
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.
Using Record Collections (Variable Data Source)
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), typically created using a Get Records element.
Mapping Record Fields to Navigation Item Properties:
label
Name (e.g., Account Name)
Text
The text that appears on the navigation item.
Yes
value
Id (e.g., Account ID)
Text (Record ID)
A unique identifier for the item. The Record ID is the safest choice.
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 for sub-items.
No
Only needed if you have submenus.
iconName
Icon_Field__c (Custom Field)
Text
A text field containing an Avonni icon name (e.g., "standard:account").
No
You may need to create a custom field on your object.
disabled
Inactive__c (Custom Field)
Boolean
If true, the navigation item is disabled.
No
Adding sub-items
Adding sub-items (submenus) creates organized, layered menus.
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.
Data Mapping
When using Variable or Picklist, configure Data Mappings in the Properties tab to tell the component how to build each navigation item from your data:
Label — Display name for the navigation item.
Value — Unique identifier for the item; matched against Active Navigation Item Value to highlight the current item.
Description — Secondary text shown below the label (certain variants).
Tag — A badge displayed on the item, with Tag Attributes (background color, text color, variant, outline, hide text) to style it.
Color — Color applied to the item indicator.
Tooltip — Tooltip shown on hover.
Icon Name — Avonni icon shown beside the item.
Icon Size — Size of the item icon: XXS, XS, Small, Medium, or Large.
Sub Items — Nested navigation items under this item.
Properties
Active Navigation Item Value — the
valueof the navigation item that should be selected when the component loads. Enter the exact text value of the item — even minor differences in spelling or capitalization will prevent the correct item from being selected.
Shaded — applies a shaded background style to the navigation bar.
Orientation — layout direction of the menu: Vertical or Horizontal.
Compact — reduces spacing between items for a more compact display. Requires Orientation = Vertical.
Show Dropdown Nubbin — displays a small arrow (nubbin) pointing to the active item in dropdown menus. Requires Orientation = Horizontal.
Open Menu On Hover — opens dropdown sub-menus when the user hovers over a parent item, rather than requiring a click. Requires Orientation = Horizontal.
Horizontal Orientation
Vertical Orientation
Title
Title — optional text title displayed above or alongside the navigation menu.
Title Icon Name — an icon shown to the left of the navigation component.
Title Icon Size — size of the title icon: XX-Small, X-Small, Small, Medium, or Large. Requires Title Icon Name.
Image Source — optional image URL shown in the title area.
Item Indicator
Configure the visual indicator that shows which item is currently active.
Show — displays the active-item indicator. Enabled by default.
Position — where the indicator sits relative to the item: Top (horizontal) / Left (vertical) or Bottom (horizontal) / Right (vertical). Requires Show to be enabled.
Interactions
Interactions define what happens when users interact with the Navigation. Configure them from the Interactions tab of the Edit Navigation panel.
Select
Fires when the user selects a navigation item. The selected item's value is available as targetName, which you can use to drive conditional logic or navigate to another screen.
Styling
The Avonni Navigation component provides flexible styling options from the Style tab.
Controls the outer spacing around the navigation menu.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing of the menu container.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the width and height of the navigation menu.
Adds a border around the navigation menu.
Color / Size / Style / Radius: Customize the border appearance.
Adjusts display when the navigation is opened as a modal dialog inside a Flow screen.
Width / Height: Dimensions of the dialog.
Background Color: Dialog background color.
Sets the menu background.
Color: Default background color.
Background Color Active / Hover / Disabled: Background color in each state.
Styles the border along the bottom of the navigation bar.
Color / Size: Border color and thickness.
Styles the menu title text.
Text Color / Font Size / Font Weight / Font Family / Text Shadow.
Styles the image shown in the title area.
Object Fit / Height / Width.
Sizes each menu item.
Width / Min Width / Max Width.
Styles the item text label in default, active, hover, and disabled states.
Text Color / Font Size / Font Weight / Font Family / Text Shadow — set per state.
Styles the secondary description text on an item.
Text Color / Font Size / Font Weight / Font Family / Text Shadow.
Styles the active-item indicator.
Color Active / Size Active / Color Hover / Size Hover.
Styles the border of individual menu items.
Color / Size / Color Active / Size Active.
Styles individual dropdown sub-items.
Background Color Selected / Background Color Disabled / Spacing Block / Spacing Inline.
Styles sub-item text labels.
Text Color / Text Color Hover / Text Color Disabled / Font Size / Font Weight / Font Family / Text Shadow.
Output Variables
The Navigation exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Navigation component, and pick the output variable you need.
Item Selection
When a user selects a navigation item.
Active Navigation Item SObject
Record (SObject)
The full SObject record corresponding to the currently active navigation item. Only populated when the Data Source is Variable and the items are backed by Salesforce records.
Example: A flow uses a Navigation fed by an Account record collection. After the user picks an item, read Active Navigation Item SObject to get the full Account record — including all its fields — without a separate Get Records element.
Others
Number of Items
Integer
The total number of navigation items currently loaded in the menu.
Flow Interaction Output Variables
Like all interactive Flow components, the Navigation exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?