Navigation Bars for Power Apps
A navigation bar is the strip across the top of a screen that carries the app name, a logo and the signed-in user's photo. The tablist and the mega menus also move users around the app: a row of tabs, or dropdown menus that open a panel of items. Reach for one when every screen needs the same header, and pair it with a sidebar when you also want a menu down the left edge. Every variant here is paid, so copying one needs a Components, Ultra, Team or Lifetime plan.
Pick a variant
| Component | Plan | YAML | What it is for | Settings you can change |
|---|---|---|---|---|
| Navigation Bar | Paid | Classic, Modern | A 50px header with logo, title and the signed-in user's photo | Title, Show User Profile, Use Custom SVG Code, SVG Logo Code |
| NavBar with Tablist | Paid | Classic | A header with a centred row of tabs and an underline under the active one | Title, Show User Profile, Use Custom SVG Code, SVG Logo Code, Tab Items (Add Tab, Remove, Reset) |
| Mega Menu Navbar | Paid | Classic | Menus that open a panel of cards with an emoji, a label and a description | Logo Text, CTA Button Text, Show User Profile, Dropdown Menus (Add Menu, Menu Name, Item Label, Short description) |
| Minimal Mega Menu Navbar | Paid | Classic | Text-only menus with underline indicators and an outlined button | Logo Text, CTA Button Text, Dropdown Menus (Add Menu, Menu Name, Item Label, Short description) |
| NavBar with Scrollable Content | Paid | Classic, Modern | A fixed header above a content area that scrolls on its own | Project Name, Show Logo, Show User Profile Picture, Content Height (px) |
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: Navigation Bars.
To copy a variant into Power Apps Studio, follow Getting Started.
After you paste
Control names below use the default prefixes; if you changed them, read your own YAML.
NavBar with Tablist. The tab buttons sit in a gallery called galTabs, and each click runs UpdateContext({selectedTab: ThisItem.id}). selectedTab is a context variable, so it belongs to one screen and holds the tab's number, not its label. To send each tab to a screen, put this in the OnSelect of btnTab:
UpdateContext({selectedTab: ThisItem.id});
Switch(ThisItem.id,
1, Navigate(TrafficScreen),
2, Navigate(ContentScreen)
)
On every other screen you paste the bar into, the underline falls back to tab 1 because the context variable starts blank there. Set it in that screen's OnVisible:
UpdateContext({selectedTab: 2})
Mega Menu Navbar. Each dropdown panel holds a horizontal gallery of cards with a transparent button on top. For the first default menu the gallery is galProductsItems and the button is btnProductsItemOverlay: the names use the menu's internal id, not the Menu Name you typed. It has no OnSelect yet. Add yours, then clear varActiveNav so the panel closes:
Switch(ThisItem.label,
"All Projects", Navigate(ProjectsScreen),
"Task Board", Navigate(TaskBoardScreen)
);
Set(varActiveNav, "")
Minimal Mega Menu Navbar works the same way with gblActiveNav and buttons such as btnProjectsItemMinOverlay. Navigation Bar and NavBar with Scrollable Content need no wiring: imgLogo holds the logo and imgUserProfilePicture is already bound to User().Image.
Good to know
- The logo is a placeholder until you replace it. With Use Custom SVG Code off, imgLogo gets Image: =SampleImage. Upload your logo as media in Studio and point the Image property at it. With the switch on, the pasted SVG is embedded in the YAML as a data URL. NavBar with Scrollable Content has no SVG box, only Show Logo.
- Content Height (px) is what makes the scrollable variant scroll. conParentScreen has LayoutOverflowY set to Scroll and holds conScrollScreen, whose Height is your Content Height value (800 to 3000). Only the part taller than the visible area (the screen height minus the 50px bar) scrolls: 1500 on an 800px tall screen gives 750px of scrolling. Five placeholder labels, lblSection1 to lblSection5, sit inside for you to replace.
- The two mega menus have an Instructions tab and need the right stacking order. Their panels are separate containers beside the bar, visible while varActiveNav (gblActiveNav on the Minimal one) holds the menu id; a transparent full-screen button, btnDropdownOverlay, closes them on a click outside. In the Tree view, keep the panels and the overlay in front of your page content or they draw underneath it. Menus you add in Settings get an internal id of Section plus a number.
- Settings editing is a step above copying. Editing the Settings tab needs Ultra, Team or Lifetime; below that the editor is read-only with an Unlock prompt.
- Both control sets and both themes. The Navigation Bar and the scrollable bar generate Classic and Modern control YAML; the two mega menus and the tablist bar are Classic only, because their menu items are buttons with their own hover and active colours, which the Modern Button cannot do. The header's theme toggle switches each generator between its light and dark colours.
Related
Open the category in the library: Navigation Bars. Related guides: Sidebars and Tabs.