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


---

# 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.lowcodera.com/ui-components-1/vertical-navbar.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.