> 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/flow/flow-components/navigation.md).

# Navigation

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

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-9fbb9998ba11f1e2d20cc1921cd75f6816a426cf%2Fimage%20(51).avif?alt=media" alt="" width="375"><figcaption></figcaption></figure>

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:**

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

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-55da52e8d979dd1d87e8e627228eec99b42eeffd%2F2024-07-27_07-11-06%20(1).gif?alt=media" alt=""><figcaption><p>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.</p></figcaption></figure>

***

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

| Data Source                                                      | Use Case                                                                  | When to Use                                                                |
| ---------------------------------------------------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| [**Manual**](/flow/component-builder/data-sources/manual.md)     | For a predefined set of items that don't require dynamic updates.         | Ideal for static content or rapid setup with specific items.               |
| [**Variable**](/flow/component-builder/data-sources/variable.md) | Dynamically displaying items based on variable collections in Salesforce. | Suitable when list content reflects changing data from Salesforce records. |
| [**Picklist**](/flow/component-builder/data-sources/picklist.md) | 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:**

| Navigation Item Property | Record Collection Field (Example)  | Data Type (Example) | Description                                                             | Required? | Notes                                                 |
| ------------------------ | ---------------------------------- | ------------------- | ----------------------------------------------------------------------- | --------- | ----------------------------------------------------- |
| 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:

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.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-d9a9eb547178bb18d62c3eaf42ac3bc5dcf9a6ee%2F2024-07-27_06-58-46.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Sub Items can only be added using the Manual and Variable Data Source.
{% endhint %}

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-95b62164801a3d078bad53b29464faf042f0ab11%2F2023-05-30_14-39-50.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

### 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 `value` of 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.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-a12111e7dc0b1be02f47ef51805aafd0268dae1a%2F2024-07-27_07-05-56.png?alt=media" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-3e2235db01b605ffff237189897f926f60e1a1ad%2Fspaces_NqnuX0CrN02poHohJRKq_uploads_7KrQnlUdZFT3szsPSp8o_2023-04-27_15-23-55.webp?alt=media" alt=""><figcaption></figcaption></figure>

#### Vertical Orientation

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-7a58e5786eb79ad89746e0f8bfee9988e55e02ed%2Fspaces_NqnuX0CrN02poHohJRKq_uploads_v294RLw4w6BGTmNjPGhI_644c072e197b5222ecd30094_2023-04-28_11-46-23.webp?alt=media" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-7c10ee954eaf47373c8544db46119017d7237f26%2F2024-07-27_07-03-58.png?alt=media" alt=""><figcaption></figcaption></figure>

* **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](/flow/component-builder/interactions-panel.md) 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.

{% tabs %}
{% tab title="Margin" %}
Controls the outer spacing around the navigation menu.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the inner spacing of the menu container.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the width and height of the navigation menu.
{% endtab %}

{% tab title="Border" %}
Adds a border around the navigation menu.

* **Color / Size / Style / Radius:** Customize the border appearance.
  {% endtab %}

{% tab title="Flow Dialog" %}
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.
  {% endtab %}

{% tab title="Background" %}
Sets the menu background.

* **Color:** Default background color.
* **Background Color Active / Hover / Disabled:** Background color in each state.
  {% endtab %}

{% tab title="Bottom Border" %}
Styles the border along the bottom of the navigation bar.

* **Color / Size:** Border color and thickness.
  {% endtab %}

{% tab title="Title" %}
Styles the menu title text.

* **Text Color / Font Size / Font Weight / Font Family / Text Shadow.**
  {% endtab %}

{% tab title="Title Image" %}
Styles the image shown in the title area.

* **Object Fit / Height / Width.**
  {% endtab %}

{% tab title="Item" %}
Sizes each menu item.

* **Width / Min Width / Max Width.**
  {% endtab %}

{% tab title="Item Label" %}
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.
  {% endtab %}

{% tab title="Item Description" %}
Styles the secondary description text on an item.

* **Text Color / Font Size / Font Weight / Font Family / Text Shadow.**
  {% endtab %}

{% tab title="Item Indicator" %}
Styles the active-item indicator.

* **Color Active / Size Active / Color Hover / Size Hover.**
  {% endtab %}

{% tab title="Item Border" %}
Styles the border of individual menu items.

* **Color / Size / Color Active / Size Active.**
  {% endtab %}

{% tab title="Menu" %}
Sizes and spaces the dropdown menu container.

* **Width / Min Width / Max Width / Height / Min Height / Max Height / Column Width / Spacing Block / Spacing Inline.**
  {% endtab %}

{% tab title="Menu Border" %}
Styles the border around the dropdown menu.

* **Color / Size / Style / Radius.**
  {% endtab %}

{% tab title="Menu Icon" %}
Styles icons used within the menu.

* **Color / Color Active / Color Hover.**
  {% endtab %}

{% tab title="Menu Group Label" %}
Styles labels that group menu items.

* **Text Color / Font Size / Font Weight / Font Family / Text Shadow.**
  {% endtab %}

{% tab title="Menu Column Label" %}
Styles column labels when the menu has multiple columns.

* **Text Color / Font Size / Font Weight / Font Family / Text Shadow.**
  {% endtab %}

{% tab title="Sub Item" %}
Styles individual dropdown sub-items.

* **Background Color Selected / Background Color Disabled / Spacing Block / Spacing Inline.**
  {% endtab %}

{% tab title="Sub Item Label" %}
Styles sub-item text labels.

* **Text Color / Text Color Hover / Text Color Disabled / Font Size / Font Weight / Font Family / Text Shadow.**
  {% endtab %}
  {% endtabs %}

***

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

| Output variable                    | Type             | What it returns                                                                                                                                                                |
| ---------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **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

| Output variable     | Type    | What it returns                                                    |
| ------------------- | ------- | ------------------------------------------------------------------ |
| **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](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

# 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/flow/flow-components/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.