Sidebar Navigation with User (Dark)

Sidebar Navigation with User (Dark) is a full-height dark sidebar that leads with a circular user avatar from User().Image, the signed-in person's name and email, a divider, and three icon nav buttons. Sized for a standard 1366×768 canvas, it gives an app an instant, professional shell.

Pro component

Subscribe to access this component and the full library.

View plans

Jean Dupont

jean.dupont@company.com

Accueil

Liste

Paramètres

Mon Application

YAML source

Preview — full code with PRO

- SidebarUserDark:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      DropShadow: =DropShadow.None
      Fill: =RGBA(23, 23, 23, 1)
      Height: =768
      RadiusBottomLeft: =0
      RadiusBottomRight: =0
      RadiusTopLeft: =0
      RadiusTopRight: =0
      Width: =200
    Children:
      - SidebarUserAvatar:
# … full component definition unlocked with PRO

This is a partial preview. Unlock the full component →

Common use cases

Authenticated apps

Show who is signed in at a glance using User() while offering the main navigation below.

Employee tools

Front internal apps with a familiar dark console layout that feels enterprise-grade.

Profile-aware navigation

Combine identity and navigation in one persistent panel.

How to use Sidebar Navigation with User (Dark) 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 — User().Image needs the user to have a photo in Microsoft 365 — provide a fallback initial or icon when it's blank.

Related navigation components

Nav Menu Horizontal

Top App Bar

Stepper

Tabs