Sidebar Navigation with User (Accent)

Sidebar Navigation with User (Accent) is the brand-colored sibling of the dark sidebar: a full-height panel on an accent background with a circular avatar, name, email and white-icon nav buttons. Swap a single Fill colour to align the whole shell with your brand.

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

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

This is a partial preview. Unlock the full component →

Common use cases

Branded internal apps

Match the sidebar to your corporate colour for a cohesive, on-brand experience.

Client-facing portals

Use a strong accent to make external apps feel polished and intentional.

Theming variants

Keep one layout and switch Fill per environment (dev/test/prod) or per client.

How to use Sidebar Navigation with User (Accent) 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 — Pick an accent dark enough that white icons and labels stay legible — test contrast before shipping.

Related navigation components

Nav Menu Horizontal

Top App Bar

Stepper

Tabs