Vertical Navbar

lowcodera Vertical Navigation Bar

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.

Component Properties

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

​Example

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

Last updated