Sidebars for Power Apps

Add professional navigation sidebars to your Power Apps. Sidebars provide persistent navigation that helps users move between different sections of your app.

When to use sidebars

Sidebars work great for apps with multiple sections that users switch between frequently. They're visible all the time (or can be collapsed), making navigation quick and predictable.

Choose your sidebar style

Sidebar Wide

Full-width sidebar with logo, navigation items with icons and labels, and user profile section at the bottom.

Best for: Apps where you want clear, readable navigation labels. Dashboard apps, admin panels, and business tools.

Settings you can customize:

• Logo icon and company name
• Navigation items (labels, icons, sections)
• Section headers to group related items
• User name display

Narrow Sidebar

Compact icon-only sidebar that saves screen space while still providing full navigation.

Best for: Apps where content needs maximum screen space. Works great alongside data tables, reports, or content-heavy screens.

Settings you can customize:

• Navigation icons
• Tooltip labels on hover
• Section dividers
• Active state styling

Collapsible Sidebar

Full sidebar that can collapse to a narrow icon-only mode. Users can toggle between expanded and collapsed states.

Best for: Apps that need flexibility - full navigation when exploring, compact mode when working with content.

Settings you can customize:

• Logo and company name
• All navigation items and icons
• Section headers
• Collapse/expand behavior
• User profile section

Sidebar with Navbar

Combines a narrow sidebar with a top navigation bar. The sidebar handles main navigation while the navbar shows branding and user profile.

Best for: Enterprise apps that need both persistent navigation and prominent branding. Complex apps with multiple navigation levels.

Settings you can customize:

• Project/company name in navbar
• Logo visibility toggle
• User profile in navbar
• Sidebar navigation items
• Section organization

Implementation steps

1. Select your sidebar

Go to Sidebars and choose the style that fits your app's complexity and screen space requirements.

2. Configure navigation items

Click on your chosen sidebar and use the Settings tab to set up:

• Logo/Branding - Your company logo and name
• Navigation Items - Add, remove, and reorder menu items
• Icons - Choose appropriate icons for each item
• Section Headers - Group related items under headers like "MAIN" or "WORKSPACE"

3. Copy YAML code

Switch to the YAML tab and copy the generated Power Apps code to your clipboard.

4. Paste into Power Apps

Open Power Apps Studio, right-click in the Tree view, and select "Paste code".

Connect sidebar navigation

After pasting, connect each navigation item to navigate to different screens:

Basic navigation

// On navigation item click
Navigate(HomeScreen, ScreenTransition.Fade)

Track active section

// Store the active screen in a variable
Set(varActiveScreen, "Home");

// Use in sidebar to highlight active item
If(varActiveScreen = "Home", RGBA(0, 120, 212, 0.1), Transparent)

Navigate with context

// Pass data when navigating
Navigate(
    DetailScreen, 
    ScreenTransition.SlideLeft,
    {SelectedCategory: "Reports"}
)

Conditional navigation visibility

// Show admin items only for admin users
If(
    User().Email in AdminEmails,
    true,
    false
)

Common use cases

Business dashboard

Use Sidebar Wide with sections like "Dashboard", "Reports", "Team", and "Settings" to create a professional business app.

Data management app

Use Narrow Sidebar to maximize space for data tables and forms while keeping navigation accessible.

Admin panel

Use Collapsible Sidebar so admins can see full labels when navigating but collapse it when reviewing detailed data.

Enterprise application

Use Sidebar with Navbar to show company branding prominently while providing comprehensive navigation.

Best practices

• Limit to 7-10 items - Too many items make navigation overwhelming
• Use clear labels - "Team Members" is better than "TM" or "People"
• Group related items - Use section headers to organize navigation logically
• Choose meaningful icons - Users should recognize icons at a glance
• Highlight active state - Make it clear which section the user is currently in
• Consider mobile - Test how your sidebar works on smaller screens

Troubleshooting

Sidebar not appearing on screen

Make sure the sidebar is positioned at the left edge of your screen (X=0) and the height spans the full screen height.

Navigation items not clickable

Check that each navigation item has an OnSelect property configured with your navigation logic.

Active state not updating

Verify that you're setting and using a variable (like varActiveScreen) consistently across all screens.

Sidebar overlapping content

Adjust your main content container's X position to start after the sidebar width (typically 240px for wide, 60px for narrow).