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


---

# 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/horizontal-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.