LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Product Tour
    • Quickstart Guide
    • Learn the Basics
    • Installation & Licenses management
    • Flow vs. Dynamic Components
    • Integrating with Experience Cloud
  • Tutorials
    • Videos
    • Projects Tutorials
    • Components Tutorials
      • Alert
        • Create a custom branding alert
        • Create an error alert dismissible
      • Avatar
        • Create an avatar with actions
        • Create an avatar with details
      • Avatar Group
        • Display a list of contacts related to an account
        • Display a list of sharing users related to the record
      • Barcode
        • Generating and Displaying Barcodes for Product Codes
      • Biometrics
        • 101 Tutorial
      • Button
        • Customizing Flow Navigation Buttons
        • How to Add a "Cancel and Close" Button
        • How to Open Flows from Buttons
      • Button Groups
        • Identifying Clicked Buttons
      • Button Menu
        • How to change dynamically Avonni Button Menu Icons
      • Calendar
        • Calendar 101 Tutorial
        • How to Connect Multiple Data Sources to the Avonni Calendar
        • How to Customize Time Spans
        • How to Customize the Right-Click Menu
        • How to Add an Edit Action to Events
        • How to Add a New Event Button to the Avonni Calendar Header
        • How to Create Events by Dragging in the Avonni Calendar
        • How to Reschedule Events with Drag and Drop
        • How to Color-Code Calendar Entries in the Avonni Calendar
        • Using a variable Data Source
        • Using a Query Data Source
      • Carousel
        • Build a Related Products Carousel
      • Combobox
        • Implement Dependent Picklists in Comboboxes
        • How to Dynamically Enable/Disable Dependent Picklists
        • Using Multi-Select Comboboxes with Reactive Formulas
      • CSV Parser
        • 101 Tutorial
      • Data Table
        • Adding Filters
        • How to add Images onthe Data Table
        • Creating Row Actions
        • Displaying a Record as a QR Code
        • Displaying Record Name field as a link
        • Learn the Basics
        • Making a field editable
        • Setting Up Data Export
        • Tips and Tricks
          • Activate infinite scrolling
          • Creating an action from a button or a link
          • Customizing the Badge Color using a formula
          • How to Grayscale Header Actions Dynamically in Avonni Data Table
          • How to Conditionally Color Cells
          • Enabling auto-refresh on the Data Table when pressing a button
          • Handling formula text field
          • How to set column visibity
          • Passing multiple record IDs to another flow
          • Data Table Editor
      • Date Picker
        • Display a date picker with Marked Dates from a Get Records
      • Date Time Picker
        • How to create Collection Variables for StartDateTime and EndDateTime
        • How to Block Out Times
      • Delay Interaction
        • Creating a Confetti Celebration on the Final Screen
        • Launch a flow dialog without a screen
      • Dual Listbox
        • Display contacts with custom icons
        • Accounts list group by industry
      • Expandable Section
        • How to add components into an expandable section
      • Header
        • Building Engaging Card Headers
        • Crafting a Profile Header
        • Adding Action Buttons to Headers
        • Adding a Background Image to Your Header
      • Input Pen
        • Add the custom Toolbar
        • How to Store Input Pen Drawings as Attachments in Salesforce
      • Kanban
        • 📹Introduction
      • List
        • Create a grid list with images
        • Create a sortable list
        • How to Reorder Items and Update Records
        • Vertical List with Actions
      • Navigation
      • Map
        • Customize the Map Marker
        • Visualizing Account Information on a Map
      • Metric
        • 📹Introduction
      • Microphone
        • Save the Microphone recording file as an attached on a record
      • Progress Indicator
        • Creating a Universal Dynamic Progress Step Collection
        • How to Change the Appearance of Your Progress Indicator using a variable
        • Error Handling
      • QR Code
        • Generate a QR Code from a record field
      • Record Detail
        • Using the Record Detail with Reactive Screens
      • Scoped Notification
        • Display message based on a value
      • Text Area
        • TextArea issue with max length when clicking on the next button
      • Tree
        • Build a Tree View with Dynamic Record Details
      • Timeline
        • Assigning multiple source collection to the Timeline
        • Customizing Date Format in the Timeline Component using Luxon
        • Create a horizontal activity timeline
        • Display Tasks
        • Perform actions on selected tasks
      • Vertical Visual Picker
        • Adding sub-items
        • Display a list of online contacts
    • Interactions
      • Enabling auto-refresh for queries after the Flow Dialog ends
      • Creating a Confetti Celebration on the final screen
      • How to create an interaction to navigate to an object
      • How to create an interaction to a record page
      • How to create an interaction to open another flow
      • How to pass an Input Variable from One Flow to Another
      • How to setup an Open Flow Panel interaction
    • Reactive Query Tutorials
      • How to make Data Tables Reactive
      • Build a reactive Data Table Using Dependent Picklists
      • Building a Dynamic Metrics Dashboard with the Data Table
      • How to build a reactive 'Quarterly Opportunity Tracker' component
      • How to Create a Combobox-Filtered Data Table
      • Create a Dynamically Linked Account-Contact View
      • Troubleshooting
    • Tips and Tricks
      • Copy / Paste a component settings
      • Create a link to the record using the href attribute
      • Create a variable and use it in a component property
      • Data Table
      • Hide Standard Header and Footer in a flow
      • How to pass your current RecordID in your screen flow
    • Platform Events
      • Configuration tutorial
  • Flow Components
    • Explore All Components
    • Alert
    • Audio Player
    • Avatar
    • Avatar Group
    • Barcode
    • Barcode Scanner
    • Biometrics
    • Blockquote
    • Button
    • Button Group
    • Button Icon
    • Button Menu
    • Calendar
    • Carousel
    • Chart
    • Chip Container
    • Combobox
    • Color Picker
    • CSV Parser
    • Date Picker
    • Data Table
    • Date Time Picker
    • Delay Interaction
    • Document Scanner
    • Dual Listbox
    • Expandable Section
    • Formatted Address
    • Formatted Name
    • Formatted Value
    • Header
    • Hero Banner
    • Icon Picker
    • Image
    • Input Choice Set
    • Input Choice Set Grid
    • Input Counter
    • Input Date Range
    • Input Pen
    • Illustration
    • Interaction service
    • Kanban
    • List
    • Map
    • Metric
    • Microphone
    • Navigation
    • NFC Scanner
    • Pill Container
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Progress Popover
    • QR Code
    • Rating
    • Record Detail
    • Scoped Notification
    • Separator
    • Slider
    • Tabs
    • Text Area
    • Timeline
    • Tree
    • User Location
    • Vertical Visual Picker
    • Visual Picker
    • Visual Picker Link
    • Video Player
    • Welcome Mat
  • Component Builder
    • Overview
    • Properties Pane
    • Interactions Pane
      • Copy Records
      • Download
      • Export To
      • Fire Confetti
      • Flow Navigation
      • Navigate
      • Show Toast
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
      • Open Flow Panel
      • Update Records
      • Refresh Query
      • Refresh All Queries
      • Open Quick Action
    • Style Pane
    • Component Templates
    • Layout and Customization
      • Alignment controls
      • Copy / Paste component settings
      • Margin / Padding
      • Pull To Boundary
      • Undo / Redo
  • Data Sources
    • Understanding Data Sources
    • Manual
    • Variable
    • Query
    • Query VS Variable
    • Picklist
  • Actions
    • Overview
    • Data Manipulation and Transformation
      • Convert Lead
      • Create file
      • Split Text to Text Collection
      • SObject Collection Math
      • SObject Collection Join
      • Get Record from SObject Collection
      • SObject Collection to Activity Timeline Items
      • SObject Collection to Calendar Marked Date Collection
      • SObject Collection to Scheduler Events
      • SObject Collection to Text Collection
    • Data Conversion and Formatting
      • Text Collection Get Value
      • Get Value from String Collection
      • Number Collection Get Value
      • Join Text Collection
      • Format Text in SObject Collection
      • Format Text Collection
      • Text Collection to Combobox Options
      • Text Collection to Dual Listbox Options
      • Text Collection to Progress Indicator Steps
    • UI & Navigation
      • New Avatar Action Collection
      • New Button Menu Item Collection
      • New Carousel Item Collection
      • New Combobox Option Collection
      • New Dual Listbox Option Collection
      • New Header Action Collection
      • New Header Avatar Action Collection
      • New List Action Collection
      • New Navigation Item Collection
      • New Progress Indicator Step Collection
      • New Progress Popover Step Collection
      • New Slider Custom Label Collection
  • Help
    • Performance Guide
    • How do I contact support?
    • How do I report Bugs?
    • Troubleshooting
    • Release Process
  • Miscellaneous
    • Live use cases examples
    • Release Notes
    • Salesforce Flow Limit
    • Security
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Configuring the Navigation
  • Configuring the Data Source
  • Defining an icon
  • Defining Navigation Item Value
  • Defining the Orientation
  • Controlling Component Visibility
  • Adding Interactions
  • Styling the navigation

Was this helpful?

  1. Flow Components

Navigation

The Avonni Navigation provides horizontal and vertical menus to guide users.

Last updated 1 month ago

Was this helpful?


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.

Using Record Collections (Variable Data Source)

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.

Understanding the Concept

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.).

Required Variable Structure

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.

Mapping Record Fields to Navigation Item Properties

The following table shows how to map fields from your records to some of properties of your navigation items:

Navigation Item Property
Record Collection Field (Example)
Data Type (Example)
Description (Flow Builder Focus)
Required?
Notes

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

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:

  1. Go to the Data Source section of the Navigation component.

  2. Select the main menu item you want to add a submenu to.

  3. 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 to be added to 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:

  1. Look at the item you want to display.

  2. Find the text value associated with that item.

  3. 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


Controlling Component Visibility

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.

    1. Select the component you want to conditionally display (e.g., an Avonni Map, a Data Table, an Input Field).

    2. Go to its Set Component Visibility properties.

    3. Set the condition Resource to the Navigation component's activeNavigationItemValue output attribute.

    4. Set the Operator (e.g., Equals).

    5. 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.


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 different 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 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

  • Border: Add a border around the entire navigation menu to give it a clear visual boundary. Customize the border's style, color, and thickness.

  • Background: Set the background color of the menu to match your application's color scheme or create visual contrast.

  • Navigation Border: If your menu has distinct sections, style the border that separates them for better organization.

  • Item: Customize the appearance of individual menu items. You can adjust:

    • Font: Choose a font that aligns with your overall design and ensures readability.

    • Size: Control the font size of menu items.

    • Colors: Set colors for the item text in different states (e.g., default, hover, active).

  • Item Label: Style the text labels for each menu item, including font, size, color, and weight.

  • Item Description: If you include descriptions for menu items, customize their appearance to provide additional context.

  • Item Border: Add borders to individual menu items to create visual separation.

  • Sub Items Label: Style the appearance of dropdown menus that appear when hovering over menu items with sub-items. This includes background color, text styles, and more.

  • Sub Item: Customize the individual sub-item appearance, similar to main menu items

  • Title: If your menu has a title, style its appearance to clearly identify the menu's purpose.

  • Title Image: Add an image to your menu title for branding or visual enhancement.

  • Menu: Control the overall style of the menu, including background color, border, and padding.

  • Menu Border: Style the border around the entire menu container.

  • Menu Icon: Customize the appearance of any icons used within the menu.

  • Menu Group Label: If you group menu items, style the labels for these groups.

  • Menu Column Label: If your menu has multiple columns, style the labels for each column

Overflow Button: When your menu has many items that exceed the available space, Avonni provides overflow buttons to enable scrolling. Style these buttons to integrate with your design seamlessly.

Available Interaction
Manual
Variable
Picklist
In this example, we only want the Avonni Map component to be visible when the user has selected the "blogNavigation" item in the navigation menu.