Vertical Navigation

Overview

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.

Configuring the Vertical Navigation Component

Select the Vertical Navigation component on the canvas to access its properties in the Properties Panel (right panel).

Basic Properties

• API Name: (Text) A unique identifier for this component instance (e.g., MainVerticalNav).

• Compact: (Boolean - Checkbox) If enabled, the navigation displays in a condensed format suitable for limited vertical space.

• Shaded: (Boolean - Checkbox) If enabled, the navigation background changes from white to a subtle light-gray shade, enhancing visual distinction.

Data Source

Determine how the navigation items populate:

• 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 Mappings

When using a Query data source for your Vertical Navigation component, 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.

Activate Tab Value

The Activate Tab Value setting allows you to define which navigation item should be active (i.e., visually selected) by default when the component loads. This ensures users start with a specific section pre-selected, improving guidance and context within your app experience.

You can set the active tab value in two ways:

• Manual Data Source: When using manually entered navigation items, the active item is determined by matching the value entered in the Activate Tab Value field with the value attribute of one of the navigation items. To activate an item by default, ensure that its value matches exactly what you provide in the Activate Tab Value setting.

• Dynamic Data Source (Query or Picklist): You can bind the Activate Tab Value 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.

By setting the active tab, you can deliver a more focused and relevant navigation experience to users from the moment the component loads.

Display Settings

These settings control the visual presentation and layout of your Vertical Navigation:

• Compact: Ideal for saving space when vertical screen real estate is limited.

• Shaded: Adds a subtle background color to differentiate navigation clearly from surrounding content.

Interactions

The Vertical Navigation component allows you to define custom interactions that respond to user clicks on navigation items. These interactions transform a simple menu into a powerful control mechanism for driving page logic, automation, and user flows.

On Item Click

You can configure actions to be triggered when a user selects a navigation item. These include:

• Navigate: Redirect the user to a record detail page, a custom page, or an external URL.

• Execute Flow: Launch a Salesforce Flow, using data from the selected item as input parameters.

• Show Toast: Display a notification or confirmation message when an item is clicked.

Alternative to Interactions: Conditional Component Visibility

In addition to using interactions, you can control the visibility of other components on the page based on the selected item in the Vertical Navigation. By configuring component visibility rules, you can make a component appear only when a specific item (by value) is selected—without needing to define an interaction. This is useful for building contextual layouts where the content shown adapts to the user's navigation choice.

Together, these options provide you with the flexibility to create dynamic, personalized, and responsive interfaces using the Vertical Navigation component.

Example: 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. Activate Tab 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