# Navigation

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

***

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

<table><thead><tr><th width="183">Data Source Type</th><th>Use Case</th><th>When to Use</th></tr></thead><tbody><tr><td><a href="/pages/N1uTGxMW16RfbM4g39MR"><strong>Manual</strong></a></td><td>For a predefined set of items that don’t require dynamic updates.</td><td>Ideal for static content or rapid setup with specific items.</td></tr><tr><td><a href="/pages/ziXlgb71wxsEEwGKKCqQ"><strong>Variable</strong></a></td><td>Dynamically displaying items based on variable collections in Salesforce.</td><td>Suitable when list content reflects changing data from Salesforce records.</td></tr><tr><td><a href="/pages/0KF78K1FCjq5yt7kxT6r"><strong>Picklist</strong></a></td><td>Displaying a list of options defined in a Salesforce picklist.</td><td>Best for presenting a list of predefined options for selection.</td></tr></tbody></table>

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

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

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

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

### Defining an icon

The Title Icon Name attribute lets you select an icon to be added to the left side of the Navigation component.

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

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

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

### Defining the Orientation

#### Horizontal Orientation

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

#### Vertical Orientation

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

***

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

<figure><img src="/files/ZCAFVbs53acBQ4VqUgyL" 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>

***

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

[**Available Interaction**](/flow/tutorials/interactions.md)

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

{% hint style="info" %}
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.
{% endhint %}

***

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

{% tabs %}
{% tab title="Layout and Spacing" %}

* **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
  {% endtab %}

{% tab title="Visual Structure" %}

* **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.
  {% endtab %}

{% tab title="Menu Item Styling" %}

* **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.
  {% endtab %}

{% tab title="Sub Item Styling" %}

* **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
  {% endtab %}

{% tab title="Menu Title and Structure" %}

* **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
  {% endtab %}

{% tab title="Navigation for Long Menus" %}
**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.
{% endtab %}
{% endtabs %}


---

# Agent Instructions: 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:

```
GET https://docs.avonnicomponents.com/flow/flow-components/navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.