LibraryTop App Bar
FREEnavigation
Top App Bar
The Top App Bar is a clean header for Power Apps screens: a menu icon, the app or page title and action icons (search, profile) on the right. It gives every screen a consistent, professional top zone and anchors navigation in landscape and mobile apps.
Power Apps locale:
Paste directly into Power Apps Studio
My Application
YAML source
# Top App Bar — PowerBlocks (FREE)
# An app header bar with a menu icon, title and two action icons.
# STEP 1 — Paste at the top of your screen. STEP 2 — Wire the icons' OnSelect.
- TopAppBar:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
X: =0
Y: =0
Width: =Parent.Width
Height: =56
Fill: =RGBA(23, 31, 46, 1)
Children:
- BarMenu:
Control: Image@2.2.3
Properties:
X: =16
Y: =16
Width: =24
Height: =24
Image: ="data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#FFFFFF' stroke-width='2' viewBox='0 0 24 24'><path stroke-linecap='round' d='M4 6h16M4 12h16M4 18h16'/></svg>")
- BarTitle:
Control: Label@2.5.1
Properties:
Text: ="My Application"
X: =56
Y: =0
Width: =400
Height: =56
VerticalAlign: =VerticalAlign.Middle
Color: =RGBA(255, 255, 255, 1)
Size: =15
FontWeight: =FontWeight.Semibold
- BarSearch:
Control: Image@2.2.3
Properties:
X: =Parent.Width - 80
Y: =16
Width: =24
Height: =24
Image: ="data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#FFFFFF' stroke-width='2' viewBox='0 0 24 24'><path stroke-linecap='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/></svg>")
- BarAvatar:
Control: Rectangle@2.3.0
Properties:
X: =Parent.Width - 44
Y: =14
Width: =28
Height: =28
Fill: =RGBA(37, 99, 235, 1)
RadiusTopLeft: =999
RadiusTopRight: =999
RadiusBottomLeft: =999
RadiusBottomRight: =999
Common use cases
App header
Give every screen a consistent branded bar with title and actions.
Mobile layouts
Provide a familiar top bar with a menu button and profile.
Section headers
Show the current page title with quick actions to the right.
How to use Top App Bar in Power Apps
- 1Choose your locale (EN or FR) and click "Copy YAML".
- 2Paste the control at the top of your screen.
- 3Wire the menu, search and avatar icons' OnSelect (e.g. open a nav menu, focus search).
- 4Bind the title to your current screen/section variable.
Tip — Recolor the bar with your Design System Kit nfSurface token and pair it with the Sidebar or Bottom Navigation for full navigation.