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.

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.

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

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

PreviousDropdown MenuNextIcon

Last updated

Was this helpful?