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.

Property	Description	Required	Accepted Values
Items	Property to define the contents of the navbar	Required	JSON
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
Default	Property to set default selection from vertical menu.	X	Numeric
ImageURL	Property to set Image URL as background.	X	Text
CollapsedWidth	Property to set width we want to have when vertical navigation menu in collapsed stage.	X	Numeric
Collapsed	Property to set default vertical navaigation position as collapsed.	X	Boolean
IconColor	Property to set icon color for navigation menu item.	X	Boolean
FontColor	Property to set font color with navigation menu item	X	String (HEX CODE in Upper Case)

​Example

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

Property Configration

• IconName property is to set as bars

• HeaderIsClickable is to set as true

• HeaderText is to set as Vertical Nav

• All control properties can be left as default

Output Property

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

Output Property	Purpose	Example
CurrentKey	Get Current selected Item's Key from vertical navigation bar.	VerticalNavBar1.CurrentKey
CollapsedStatus	Returns "Collapsed" or "Expanded" depending on the current state of the menu	VerticalNavBar1.CollapsedStatus

Event Configuration

Once we configure our Navigation bar, we need to configure OnChangeevent. The code contains one switch function which will navigate user to appropriate page when any item is selected from the navigation bar.

Switch(
    VerticalNavBar1.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"
)