Vertical Navigation

The Avonni Vertical Navigation component provides a clean and intuitive way to present navigational links or menu items vertically, ideal for efficient space management and user-friendly navigation within Salesforce applications.

Overview

Configuration

To configure the Vertical Navigation, select it on the canvas. The Edit Vertical Navigation panel opens on the right. The sections below mirror the configuration panel from top to bottom.

Data Source

Before you build your navigation, you must tell the component where to get its items. You have several options depending on the source and nature of your data:

Source	Description
Manual	Enter navigation items directly into the component configuration.
Query	Dynamically populate navigation items from Salesforce records using SOQL queries.
Picklist	Automatically retrieve and display navigation items from standard or custom Salesforce picklist values.

Data Mapping

When using a Query data source, Data Mappings allow you to define how Salesforce field values should populate the visual and functional properties of each navigation item.

Data mappings are essential for transforming raw Salesforce data into a structured, user-friendly navigation menu. They let you connect specific fields from your data to the component's display and behavior attributes, ensuring that each navigation item is contextually informative, visually distinct, and conditionally interactive:

• Label: The main text displayed for each navigation item.
• Avatar: URL or resource link to an avatar or icon image displayed next to navigation items.
• Tag: Text label or tag displayed as secondary metadata.
• Disabled: Boolean field indicating whether a navigation item should be selectable.
• Hidden: Boolean field specifying whether a navigation item should be visible.

Note: When using a manual data source, these attributes must be provided manually for each navigation item.

Properties

Auto Select First Item

If enabled, the first item will be selected by default when the component initializes.

Active Item Value

The value of the active item. If empty, the first item will be active.

Requires: Auto Select First Item is not enabled.

You can set the active item value in two ways:

• Manual Data Source: The active item is determined by matching the value entered here with the value attribute of one of the navigation items. Ensure the value matches exactly.

• Dynamic Data Source (Query or Picklist): You can bind this setting to a field or variable, allowing it to change dynamically at runtime. This is useful for context-aware scenarios, such as selecting an item based on a record ID or user input.

Compact

If enabled, the navigation displays in a condensed format suitable for limited vertical space.

Shaded

If enabled, the navigation background changes from white to a subtle light-gray shade, enhancing visual distinction from surrounding content.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Use Cases

Displaying Navigation Items from Salesforce Records

Scenario: Dynamically display navigation items representing Salesforce Opportunities.

Setup Steps:

1. Create Query:

   • Select Opportunity as the primary object.
   • Apply necessary filters to refine data.
2. Configure Data Mappings:

   • Label: Map to the Opportunity Name field.
   • Avatar: Map to an image URL or static resource if desired.
   • Tag: Map to a status or type field.
   • Disabled/Hidden: Map to boolean fields or conditions based on business logic.
3. Active Item Value:

   • Set dynamically based on Opportunity conditions, such as selecting the first record as active by default.

Now, the Vertical Navigation dynamically populates Opportunity records as navigation items, clearly indicating status and providing an interactive, compact navigation experience.

Interactions

Interactions define what happens when users interact with the Vertical Navigation. Configure them from the Interactions tab of the Edit Vertical Navigation panel.

Item Click

Fires when a user selects a navigation item. Use the activeItem and activeItemValue output variables to identify which item was selected and drive downstream logic such as navigation, flow execution, or conditional visibility.

Output Variables

The Vertical Navigation exposes these output variables you can reference elsewhere on the page after the user interacts with it.

Item Selection

When a user selects a navigation item, these variables update with the active item's data.

Output variable	Type	What it returns
Active Item	Object	The currently active navigation item — same properties as the static data source items.
Active Item SObject	Record (SObject)	The full Salesforce record associated with the active item. Requires a Query data source.

Example: When a user selects a navigation item mapped to an Opportunity, use Active Item SObject to display the Opportunity's details in a record-detail component beside the navigation.

Others

Output variable	Type	What it returns
Number of Items	Number	The total number of navigation items currently loaded in the component.