Sidebar Nav

The Sidebar Nav is a vertical, left-aligned navigation panel pairing an icon and label for each item, with a blue background strip marking the active route. It's the backbone layout for data-heavy back-office apps that need many destinations always visible.

Pro component

Subscribe to access this component and the full library.

View plans

Dashboard

Reports

Users

YAML source

Preview — full code with PRO

# Sidebar Nav — PowerBlocks (PRO)
# The active item highlight lives on its container (Fill + Radius).

- SidebarNav:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      Width: =220
      Height: =400
      Fill: =RGBA(23, 23, 23, 1)
      DropShadow: =DropShadow.None
    Children:
      - NavItemDashboard:
          Control: GroupContainer
# … full component definition unlocked with PRO

This is a partial preview. Unlock the full component →

Common use cases

Back-office layouts

Provide persistent access to Dashboard, Reports, Users and Settings down the left edge.

Admin consoles

Organise a large feature set into a scannable vertical menu.

Multi-module apps

Switch between modules while keeping the current location highlighted.

How to use Sidebar Nav in Power Apps

1Open the component page — the YAML uses the invariant Power Fx syntax and works in every Power Apps locale.
2Click "Copy YAML" to copy the full component definition to your clipboard.
3In Power Apps Studio, open your screen in the Tree view and paste (Ctrl+V) — the component appears ready to use.
4Rebind the data-driven properties (Items, OnSelect, Fill, Text) to your own data source and theme.

Tip — Drive the active highlight from the same variable you use in Navigate so the menu and screen stay in sync.

Related navigation components

Nav Menu Horizontal

Top App Bar

Stepper

Tabs