> 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/horizontal-navbar.md).

# Horizontal Navbar

## Purpose

The lowcodera horizontal navigation bar provides a quick and elegant solution to one of the most common UI requirements within an app. Our component supports rich styling options, icons, dynamic data binding, and multilevel item nesting.

## Variations

![Lowcodera Naviation bar](/files/m1dd6qMUyztOmykTBEY3)

![](/files/MqBmBTOjNnh8nPOVZkq1)

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

## ​Working with Data

‌The data format for the navigation bar is simple and easy to configure.  

{% hint style="info" %}
Note: Make sure Navigation Component you are adding on the screen is reordered with the "Bring to Front" option.
{% endhint %}

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called `globalNav` 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/ZRfddMYoO1NrwL3EIayZ)
{% endtab %}

{% tab title="Property Configration" %}

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

{% tab title="Output Property" %}
Please check the following Output properties for Lowcodera's H 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 horizontal navigation bar.</td><td>HorizontalNavBar1.CurrentKey</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(
    HorizontalNavBar1.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 %}

## Component Properties

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

<table data-header-hidden><thead><tr><th width="197">Control Property</th><th width="219">Description</th><th width="150">Required</th><th width="184">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</strong></td></tr><tr><td>Items</td><td>Property to define how navigation bar looks like</td><td></td><td>Table</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></tbody></table>

## Examples&#x20;

![](/files/0yhnqdDN1sOgep13Pgid)

{% tabs %}
{% tab title="Data Configuration" %}
We need to add the following collection.&#x20;

```csharp
ClearCollect(
Nav4,
    {
        type: "Action",
        icon: "bell",
        key: "Option1",
        title: "Item 1"
    },
    {
        type: "Action",
        title: "Item 2",
        key: "Option2",
        icon: "share-square"
    },
    {
        type: "Action",
        title: "Item 3",
        icon: "user-circle",
        key: "Option3"
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `IconName` property is to set as **atom**
* [x] `Theme` property is to set based on requirements.&#x20;
* [x] `HeaderIsClickable` is to set as **true**
* [x] `HeaderText` is to set as **based on requiremet**
* [x] All control properties can be left as default
  {% endtab %}
  {% endtabs %}