Horizontal Navbar

Lowcodera Horizontal Navigation Bar Component

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

‌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.

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

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.

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.

Property Configration

• IconName property is to set as award

• HeaderIsClickable is to set as true

• HeaderText is to set as Lowcodera

• All control properties can be left as default

Output Property

Please check the following Output properties for Lowcodera's H Navbar control.

Output Property	Purpose	Example
CurrentKey	Get Current selected Item's Key from horizontal navigation bar.	HorizontalNavBar1.CurrentKey

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"
)

Component Properties

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

Property	Description	Required	Accepted Values
Items	Property to define how navigation bar looks like		Table
Theme	Property to change theme of the navigation bar	X	Default Danger Info Primary Secondary Success Warning
FontSize	Property to set font size	X	Number
IconName	Property to icon name for header	X	Font-awosome icon name
HeaderIsClickable	Property to make header clickable.	X	Boolean
HeaderText	Property to change header title	X	Text

Examples

Data Configuration

We need to add the following collection.

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"
    }
)

Property Configuration

• IconName property is to set as atom

• Theme property is to set based on requirements.

• HeaderIsClickable is to set as true

• HeaderText is to set as based on requiremet

• All control properties can be left as default