Sidebars for Power Apps
A sidebar is the column on the left edge of a screen that lists the app's sections, usually one icon and label per row with headers such as MAIN and WORKSPACE between groups. Reach for one when the app has more sections than fit in a top bar, or when users switch sections all day and need to see where they are. Sidebar Wide is free; the rest need a Components, Ultra, Team or Lifetime plan.
Pick a variant
| Component | Plan | YAML | What it is for | Settings you can change |
|---|---|---|---|---|
| Collapsible Sidebar | Paid | Classic, Modern | A sidebar the user collapses to icons with a toggle | Sidebar Title, Sidebar Background Color, Navigation Items (Add Item, Add Header) |
| Narrow Sidebar | Paid | Classic, Modern | An icon-only rail that takes 5% of the screen width | Navigation Items (Add Item, Add Header) |
| Sidebar with Navbar | Paid | Classic, Modern | A 60px icon rail plus a top bar with project name and profile picture | Project Name, Show Logo, Show User Profile, Sidebar Navigation Items (Add Item, Add Header) |
| Sidebar Wide | Free | Classic, Modern | A 195px sidebar with logo, labelled rows, section headers and the user's name | Sidebar Title, Logo Icon, User Name, Navigation Items (Add Item, Add Header) |
| Animated Sidebar | Paid | Classic | A 45px rail drawn as one SVG image with a sliding selection marker | Primary/Accent Color, Background Color, Active Icon Color, Inactive Icon Color, Divider Color, Menu Items (Add Item, Icon SVG / PowerIcon YAML, Show Divider Below) |
| Dropdown Sidebar | Paid | Classic, Modern | Sections that expand and collapse, plus items that are always visible | Dropdown Sections (Add Section, Section Name, Item Label), Standalone Items (Add Item), Custom Icon SVG |
| Glass Floating Sidebar | Paid | Classic, Modern | A translucent panel that floats 16px inside the screen, with badges and a user role line | Accent Color, User Role Text, Enable Notification Badges, Badge Count, Dropdown Sections (Add Section), Standalone Items (Add Item), Show notification badge on this item, Custom Icon SVG |
Paid means a Components, Ultra, Team or Lifetime plan (pricing). Classic and Modern are the two Power Apps control sets you can pick from the Copy YAML button. Open the category in the library: Sidebars.
To copy a variant into Power Apps Studio, follow Getting Started.
Icons are typed, not picked, on Sidebar Wide, Narrow Sidebar, Collapsible Sidebar and Sidebar with Navbar: each item has an Icon box that takes a Power Apps icon name such as Home, Waffle or Globe. Dropdown Sidebar and Glass Floating Sidebar offer an icon dropdown plus a Custom Icon SVG box, and Animated Sidebar takes SVG or powericons.dev YAML per item.
After you paste
Sidebar Wide, Narrow Sidebar, Collapsible Sidebar and Sidebar with Navbar share one wiring model. Their gallery galSidebarItems reads a Table where every clickable row has a screen column set to App.ActiveScreen, and the button btnItemAction already runs Set(varActiveSidebarItem, ThisItem.labelText); If(!IsBlank(ThisItem.screen), Navigate(ThisItem.screen)). Your only job is to swap App.ActiveScreen for the real screen in the Items property of galSidebarItems:
Table(
{ id: 1, isHeader: true, labelText: "MAIN", itemIcon: Blank(), screen: Blank() },
{ id: 2, isHeader: false, labelText: "Home", itemIcon: Icon.Home, screen: HomeScreen },
{ id: 3, isHeader: false, labelText: "Dashboard", itemIcon: Icon.Waffle, screen: DashboardScreen }
)
Dropdown Sidebar and Glass Floating Sidebar name their controls after the section label with spaces removed: the MAIN section gets a gallery galMAINItems, a button btnMAINItemClick and an expand variable varExpandMAIN (varExpandMAINMENU on Glass Floating). The button only records the click, so add the navigation yourself in the OnSelect of btnMAINItemClick:
Set(varActiveSidebarItem, ThisItem.label);
Switch(ThisItem.label,
"Home", Navigate(HomeScreen),
"Dashboard", Navigate(DashboardScreen)
)
Collapsible Sidebar toggles a global variable named varSidebar (this one name never follows your prefix settings), and the Width of conSidebar is If(varSidebar, Parent.Width * 17%, Parent.Width * 5%). Let your content container follow it by putting this in its X, and Parent.Width - conSidebar.Width in its Width:
conSidebar.Width
Animated Sidebar is different: one Image control draws the whole rail as SVG, and transparent buttons btnSidebarItem1, btnSidebarItem2 and so on sit on top. Append your Navigate() after the three Set() calls the YAML already places in each button's OnSelect.
Good to know
- Two settings only change the preview. User Name on Sidebar Wide does not reach the YAML, which binds lblName to User().FullName. Sidebar Background Color on Collapsible Sidebar is never read by its generator either; change the Fill of conSidebar in Studio instead.
- All but one offer Modern controls. Animated Sidebar is Classic only. Custom SVG icons on Dropdown and Glass Floating survive in both control sets: each row shows an icon control when its iconType is "default" and an Image control when it is "custom".
- The selected row colours itself. The active row's Fill is your brand colour at 15% opacity, chosen by comparing varActiveSidebarItem with the row's label; before any click the first item counts as active. Every screen that shows the sidebar reads that same global variable.
- Widths to plan your content around. Sidebar Wide 195px, Narrow Parent.Width * 5%, Collapsible 17% or 5%, Sidebar with Navbar 60px, Dropdown 250px, Glass Floating 260px at X 16 and Y 16, Animated 45px.
- Instructions and unlocking. Glass Floating Sidebar and Animated Sidebar have an Instructions tab. Copying a paid sidebar needs a Components, Ultra, Team or Lifetime plan; editing the Settings tab needs Ultra, Team or Lifetime, below that the editor is read-only with an Unlock prompt.
Related
Open the category in the library: Sidebars. Related guides: Navigation Bars and App Shells.