> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/vertical-navigation.md).

# 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

<figure><img src="/files/A42ZwElyMcKobxMmlxvI" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/oZEGk9LGfM0NMsOgjvtj" alt="" width="318"><figcaption></figcaption></figure>

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

<figure><img src="/files/gnUiWRIojhZRaT70W60x" alt="" width="317"><figcaption></figcaption></figure>

{% hint style="info" %}
**Note:** When using a manual data source, these attributes must be provided manually for each navigation item.
{% endhint %}

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

<figure><img src="/files/P7GQpl3MKNJdDfJqhgei" alt="" width="375"><figcaption></figcaption></figure>

* **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](/dynamic-components/core-concepts/component-visibility.md).

## 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](/dynamic-components/component-builder/interactions.md) 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. |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/vertical-navigation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.