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

# Vertical Navbar

## Purpose

Our vertical menu component instantly provides your Power Apps with a dynamic professional grade navigation solution. Define multi-level navigation items, customize the look and allow users to expand/collapse the menu to create a stunning user experience.

## Variations

‌There are several variations of navigation bar with different colors and configuration properties.

![](/files/9Qza2PSQpDNutRW9BAl4)

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th>Control Property</th><th width="242">Description</th><th width="150">Required</th><th width="150">Accepted Values</th></tr></thead><tbody><tr><td>Property</td><td>Description</td><td>Required</td><td>Accepted Values</td></tr><tr><td>Items</td><td>Property to define the contents of the navbar</td><td>Required</td><td>JSON </td></tr><tr><td>Theme</td><td>Property to change theme of the navigation bar</td><td>X</td><td><p>Default</p><p>Danger</p><p>Info</p><p>Primary</p><p>Secondary</p><p>Success</p><p>Warning</p><p></p></td></tr><tr><td>FontSize</td><td>Property to set font size </td><td>X</td><td>Number</td></tr><tr><td>IconName</td><td>Property to icon name for header</td><td>X</td><td><a href="https://fontawesome.com/v5.15/icons?d=gallery&#x26;p=2&#x26;m=free">Font-awosome icon name</a></td></tr><tr><td>HeaderIsClickable</td><td>Property to make header clickable.</td><td>X</td><td>Boolean</td></tr><tr><td>HeaderText</td><td>Property to change header title</td><td>X</td><td>Text</td></tr><tr><td>Default</td><td>Property to set default selection from vertical menu.</td><td>X</td><td>Numeric</td></tr><tr><td>ImageURL</td><td>Property to set Image URL as background.</td><td>X</td><td>Text</td></tr><tr><td>CollapsedWidth</td><td>Property to set width we want to have when vertical navigation menu in collapsed stage.</td><td>X</td><td>Numeric</td></tr><tr><td>Collapsed</td><td>Property to set default vertical navaigation position as collapsed.</td><td>X</td><td>Boolean</td></tr><tr><td>IconColor</td><td>Property to set icon color for navigation menu item.</td><td>X</td><td>Boolean</td></tr><tr><td>FontColor</td><td>Property to set font color with navigation menu item</td><td>X</td><td>String (HEX CODE in Upper Case)</td></tr></tbody></table>

## ​Example

> Note: Make sure Navigation Component you are adding on the screen is Reordered with the "Bring to Front" option.

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called `globalverticalnav` is defined in the Power App. The **`items`** property of the navigation bar component is then bound to this collection.

```markup
Table(
    {
        type: "DropDown",
        title: "Employee Corner",
        icon: "object-group",
        key: "ec",
        dropDown: ForAll([
            {
                type: "Action",
                title: "Log Timesheet",
                key: "logtimesheet"
            },
            {
                type: "Action",
                title: "Apply Leave",
                key: "leave"
            },
            {
                type: "Action",
                title: "My Projects",
                key: "projects"
            }
        ], {Value: ThisRecord})
    },
    {
        type: "DropDown",
        title: "HR Corner",
        icon: "chart-area",
        key: "hrcorner",
        containerIdentifier: "contactConainer",
        height: 150,
        direction: "bottom-start",
        dropDown: ForAll([
            {
                type: "Action",
                title: "HR Policies",
                key: "policies"
            },
            {
                type: "Action",
                title: "TimeSheet",
                key: "timesheet"
            },
            {
                type: "Action",
                title: "Leave Approval",
                key: "approval"
            },
            {
                type: "Action",
                title: "Notifications",
                key: "notification"
            }
        ], {Value: ThisRecord})
    },
    {
        type: "Action",
        icon: "cog",
        key: "settings",
        title: "Settings"
    },
    {
        type: "Action",
        key: "user",
        icon: "user-circle",
        title: "User"
    }
)
```

The above code snippet will generate the following navigation bar.

![](/files/D8CHKKPp7Fzs3FcguDOa)

![](/files/ww4l6M5T7U2KzZxz7E4s)
{% endtab %}

{% tab title="Property Configration" %}

* [x] `IconName` property is to set as **bars**
* [x] `HeaderIsClickable` is to set as **true**
* [x] `HeaderText` is to set as **Vertical Nav**
* [x] All control properties can be left as default
  {% endtab %}

{% tab title="Output Property" %}
Please check the following Output properties for Lowcodera's V Navbar control.

<table><thead><tr><th>Output Property</th><th width="247.33333333333331">Purpose</th><th>Example</th></tr></thead><tbody><tr><td>CurrentKey</td><td>Get Current selected Item's Key from vertical navigation bar.</td><td>VerticalNavBar1.CurrentKey</td></tr><tr><td>CollapsedStatus</td><td>Returns "Collapsed" or "Expanded" depending on the current state of the menu</td><td>VerticalNavBar1.CollapsedStatus</td></tr></tbody></table>

{% endtab %}

{% tab title="Event Configuration" %}
Once we configure our Navigation bar, we need to configure `OnChange`event.  The code contains one switch function which will navigate user to appropriate page when any item is selected from the navigation bar.

```
Switch(
    VerticalNavBar1.CurrentKey,
    "0",
    Navigate(Home),
    "logtimesheet",
    Navigate(Home),
    "leave",
    Navigate(Navbar),
    "projects",
    Navigate(Buttons),
    "policies",
    Navigate(Icons),
    "timesheet",
    Navigate(Cards),
    "approval",
    Navigate(Dropdown),
    "notification",
    Navigate('Bar Chart'),
    "settings",
    Navigate('Column Chart'),
    "user"
)


```

{% endtab %}
{% endtabs %}