> 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/projects/flow-components/get-started/building-left-side-vertical-navigation.md).
# Building Left-Side Vertical Navigation
## Overview
This tutorial will walk you through creating a left-side vertical navigation menu for your app using the Avonni Navigation component. You'll learn key concepts, best practices, and helpful tips to improve your app's overall user experience.
**By the end of this tutorial, you'll be able to**
* Confidently build intuitive and user-friendly left-side navigation menus
* Understand how to use Avonni Flow Screen Components effectively
## **Here's what we'll cover**
1. **Create Reusable Navigation Items:** We'll use Avonni's "Navigation Item Collection" tool to define global navigation items that can be used throughout your app. This saves development time and ensures a more consistent interface.
2. **Set Up Navigation Logic:** We'll add a "router" to control the screen shown when a user clicks on a navigation item.
3. **Build the Screens:** We'll create the screens for each navigation item and connect them to the left-menu navigation component. This maintains the look and feel of your app's unified appearance.
4. **The final step will be revealed later in the tutorial.** (Keep reading to find out!)
Screen Flow overview architecture
## Final Result
## Guided Steps
{% stepper %}
{% step %}
### Define global navigation items
To start, we’ll create a centralized list of navigation items for your side menu. This step is essential because it enables you to manage all your menu options in one place, ensuring consistent navigation and making updates easy as your app grows. By defining these items at the beginning of your Flow, you ensure that every screen in your app references the same collection, saving time and reducing errors from duplicate or mismatched menus.
1. **Add an Action Element:** On your Flow canvas, add an **Action** element.
2. **Find the Avonni Action:** In the "Category" list, choose **Avonni**, then select **Navigation Item Collection** as the Action.
3. **Name and Add Items:**
* Give the action a clear **Label** (e.g., "Define Main Navigation").
* Under **Navigation Items**, click **Add Item** for each menu option you want. For each item, provide a **Label** (what the user sees, e.g., "Welcome") and a **Name** (a unique API-style name, e.g., `welcome`).
4. **Store the Output:**
* Go to the **Advanced** section and check **Manually assign variables**.
* Under "Store Output Values," create a **New Resource**.
* **Resource Type:** `Variable`
* **API Name:** `navigationItems`
* **Data Type:** `Apex-Defined`
* Select the box labeled '**Allow multiple values (collection)**'.
* **Apex Class:** Select `avcmpbuilder__NavigationItem`.
* Click **Done**. You've now created a collection variable (`navigationItems`) that holds all your menu item data.
{% endstep %}
{% step %}
### Create a Variable to Track the Active Screen
Next, we need to set up a variable that tracks which screen the user is currently viewing. This variable acts as the “state” of your navigation, letting the Flow know which section to display at any given time.
1. **Create a New Resource:** In the Flow's toolbox, create a **New Resource**.
2. **Resource Type:** `Variable`
3. **API Name:** `activeNavItem`
4. **Data Type:** `Text`
5. **Default Value:** Set this to the unique **Name** of the *first* item you created in Step 1 (e.g., `generalSettings`). This ensures the "General Settings" screen shows first.
{% endstep %}
{% step %}
### Build the Main "Router"
Now, set up the main “router” logic using a Decision element. This router is responsible for directing users to the correct screen based on which navigation item they’ve selected.
**Why is this important?**\
The router is the heart of your navigation system. Evaluating the \`activeNavItem\` variable ensures that users are directed to the correct screen when they interact with the menu.
1. **Add a Decision Element:** Add a **Decision** element to your canvas after the Apex Action from Step 1.
2. **Create an Outcome for Each Navigation Item:**
* For your first outcome, set the **Label** to "Go to Welcome".
* **Condition:** `{!activeNavItem}` **Equals** `generalSettings`.
* Repeat this for every navigation item you created in Step 1, creating a separate outcome path for each (e.g., "Go to Step 2" where `{!activeNavItem}` equals `step2`).
* Click **Done**. You should now have your router with a path for each possible screen.
{% endstep %}
{% step %}
### Create Your First Screen and Its Assignment
**First Screen Creation**
Next, you’ll build the first full navigation path by creating a screen and connecting it to your router logic. This step is crucial because it activates your navigation structure and ensures that users see the correct content when they select a menu item.
* **Add a Screen Element:** Drag a **Screen** element onto the canvas and connect it to the "General Settings" outcome of your Decision router.
* **Add the Avonni Navigation Component:**
* Drag the **Avonni Navigation** component onto the screen canvas.
* **Configure its properties:**
* **Data Source:** Set this to your `{!navigationItems}` collection variable.
* **Value:** Set this to your `{!activeNavItem}` variable. This ensures the correct item is highlighted.
* **Add Screen Content:** Drag other components for your "General Settings" view onto the screen.
Avonni Navigation Configuration screen
**Configure the Navigation Interaction**
This step is essential because it defines what happens when a user clicks on a navigation item. To set it up, open the component builder, go to the Interaction tab, and select the action for the navigation item. Choose the option to move to the next screen in the flow. This ensures that when a user selects a navigation item, the flow automatically takes them to the appropriate screen.
**Assignment creation**
Now, add an Assignment element to capture the user’s navigation choice and update the active screen variable. This step is essential because it keeps your navigation state in sync with the user’s actions, ensuring the Flow always displays the correct screen after a menu selection.
* **Add an Assignment Element:** **This is a key step.** Drag an **Assignment** element onto the canvas and connect the "Settings" screen *to this Assignment*.
* **Configure the Assignment:**
* **Label:** Give it a name like "Set Active Item from Settings Screen".
* **Set Variable Values:** Configure the assignment to update your state variable.
* **Variable:** `{!activeNavItem}`
* **Operator:** `Equals`
* **Value:** Select the **Avonni Navigation** component from the "Screen Components" section, and then select its **`value`** attribute.
* Click **Done**.
{% endstep %}
{% step %}
### Complete the Navigation Loop
This final connection ensures continuous navigation.
1. **Connect Back to the Router:** Drag the connector from the **Assignment** element you just created *back to the Decision element* from Step 3.
**How this logic works:** When the user clicks a new item in the Navigation component, its `value` changes. When the user proceeds from the screen (e.g., clicks the Flow's "Next" button), the **Assignment** element captures that new `value` and updates the `activeNavItem` variable. The loop then sends the Flow back to the **Decision** element, which now reads the *new* value and routes the user to the correct screen.
{% endstep %}
{% step %}
### Build and Connect the Remaining Screens
Now that the pattern is established, repeat the process for all other outcome paths from your Decision router:
1. **Add a Screen** element for the next outcome (e.g., "Go to Step 2").
2. Inside the screen, add and configure the **Avonni Navigation** component and your content, just as you did in Step 4.
3. Add an **Assignment** element after the new screen, configuring it to set `{!activeNavItem}` from this new screen's navigation component value.
4. **Connect the Assignment back to the Decision element** to complete the loop for this path.
5. Repeat until all navigation paths are built
{% endstep %}
{% endstepper %}
{% hint style="info" %}
**Having trouble with this tutorial**? [Contact Avonni support for help](https://docs.avonnicomponents.com/help/how-do-i-contact-support).
{% endhint %}
---
# 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/projects/flow-components/get-started/building-left-side-vertical-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.
