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

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.

*** ## 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.
{% hint style="info" %} Sub Items can only be added using the Manual and Variable Data Source. {% endhint %}
### 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). * **Tooltip** — Tooltip shown on hover. * **Color** — Color applied to the item indicator. * **Avatar** — Avatar object for an icon or image beside the item. * **Tag** — A badge displayed on the item. * **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.
* **Shaded** — applies a shaded background style to the navigation bar. * **Compact** — reduces spacing between items for a more compact display. * **Show Dropdown Nubbin** — displays a small arrow (nubbin) pointing to the active item in dropdown menus. * **Open Menu On Hover** — opens dropdown sub-menus when the user hovers over a parent item, rather than requiring a click. * **Orientation** — layout direction of the menu: **Vertical** or **Horizontal**. #### Horizontal Orientation
#### Vertical Orientation
### 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.
* **Title Icon Size** — size of the title icon: XX-Small, X-Small, Small, Medium, or Large. * **Image Source** — optional image URL shown in the title area. ### Item Indicator Configure the visual indicator that shows which item is currently active (position: Top or Bottom for horizontal, Left or Right for vertical). ## 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. ### Active 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="Layout and Spacing" %} * **Margin:** Control the spacing around the entire navigation menu. * **Padding:** Adjust the menu container's inner spacing. * **Size:** Control the width and height of the navigation menu. {% endtab %} {% tab title="Visual Structure" %} * **Border:** Add a border around the navigation menu (style, color, thickness). * **Background:** Set the background color of the menu. * **Navigation Border:** Style the border separating menu sections. {% endtab %} {% tab title="Menu Item Styling" %} * **Item:** Font, size, and colors for menu items in default, hover, and active states. * **Item Label:** Font, size, color, and weight of item text labels. * **Item Description:** Style for item descriptions. * **Item Border:** Borders for individual menu items. {% endtab %} {% tab title="Sub Item Styling" %} * **Sub Items Label:** Style for dropdown sub-menus (background color, text styles). * **Sub Item:** Individual sub-item appearance. {% endtab %} {% tab title="Menu Title and Structure" %} * **Title:** Style for the menu title. * **Title Image:** Add an image to the menu title. * **Menu:** Overall menu background color, border, and padding. * **Menu Border:** Border around the entire menu container. * **Menu Icon:** Appearance of icons used within the menu. * **Menu Group Label:** Style for labels that group menu items. * **Menu Column Label:** Style for column labels when the menu has multiple columns. {% endtab %} {% tab title="Navigation for Long Menus" %} **Overflow Button:** When the menu has many items that exceed available space, Avonni provides overflow buttons to enable scrolling. Style these to integrate with your design. {% 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=&goal= ``` `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.