Back to LibraryNavigation & Pagination
Navigation Menu
Added Aug 13, 2026
A horizontal navigation bar with 3 toggle-dropdown menus (a simple list, a 2-column grid, and an icon-led list) plus one plain link item. Inspired by the shadcn/ui NavigationMenuDemo composition.
Dark Mode
CopySnips Live Preview
How to Use
- On the Settings tab, edit the 4 nav bar labels. The first 3 include a trailing chevron character (▾) baked directly into the text; keep or remove it as you like when editing. The dropdown panels' own content (titles/descriptions/icons) is fixed for this first build; edit galNavMenuGettingStarted.Items / galNavMenuComponents.Items / galNavMenuIcons.Items directly in the pasted YAML to relabel, add, or remove rows. The Preview tab and the copyable YAML update together.
- Paste the YAML into Power Apps Studio (Ctrl+V). Four independent top-level controls are added: conNavMenuBar (the nav bar) plus 3 dropdown panels. They're siblings, not nested, so paste them all together onto the same screen.
- Only ONE dropdown panel can be open at a time: clicking a trigger opens its panel and closes any other; clicking the SAME trigger again closes it. This is driven by one shared variable, varNavMenuOpen, holding a fixed internal key ("trigger1"/"trigger2"/"trigger3"), independent of whatever label text you set, so renaming a trigger never breaks the toggle. The 4th item ("Docs") has no dropdown: it fires a placeholder action directly.
- The open trigger gets a light grey Fill to show which panel is active, safe to do directly on the button since the label/chevron IS the button's own Text (not a separate control underneath it). The 3 panels' own row items are the opposite case (title/description are separate Label controls under a topmost click-target Button), so their hover feedback is a border ring only, never a Fill: the same "never risk hiding decorative content under a topmost control" rule this project has hit and fixed on other components (see Command).
- The "Components" panel arranges its 6 items in a 2-column grid via galNavMenuComponents.WrapCount:=2 (same Vertical-Gallery-with-WrapCount mechanism as a calendar day grid); each row still uses Parent.TemplateWidth for its content, which reflects the per-column width automatically.
- Icons (Backlog/To Do/Done) are hand-drawn inline SVG (via Image + EncodeUrl), not Classic/Icon, matching Command's icon technique: imgNavMenuIconGlyph wraps whichever shape is in that row's IconPath in a shared <svg> shell.
- Clicking any panel row or the "Docs" link shows a placeholder confirmation toast (Notify()); wire each hit-button's OnSelect (btnNavMenuGSHit / btnNavMenuCompHit / btnNavMenuIconHit / btnNavMenuTrigger4) to your real navigation once connected.
- No OnVisible initialisation needed: varNavMenuOpen reads as Blank() until the first trigger click, which every panel's Visible formula already treats as "closed."
Problem Solved
Provides a ready-made multi-panel navigation bar (several different dropdown content shapes: list, grid, icon-list) under one shared toggle mechanism, which Power Apps has no native equivalent for.
Integration
The 4 trigger labels are plain settings-driven text substituted directly into the copied YAML. Dropdown panel content lives in each Gallery's Items (a fixed array); edit those arrays directly in the pasted YAML. Wire each row/link's OnSelect to your real per-destination navigation once connected.
YAML Code
- conNavMenuBar:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Fill: =RGBA(0, 0, 0, 0)
Height: =40
LayoutAlignItems: =LayoutAlignItems.Stretch
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =4
Width: =480
X: =20
Y: =20
Children:
- btnNavMenuTrigger1:
Control: Classic/Button@2.2.0
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderColor: =RGBA(0, 0, 0, 0)
BorderThickness: =0
Color: =RGBA(15, 23, 42, 1)
Fill: =If(varNavMenuOpen = "trigger1", RGBA(241, 245, 249, 1), RGBA(0, 0, 0, 0))
FocusedBorderThickness: =0
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(0, 0, 0, 0)
HoverColor: =Self.Color
HoverFill: =RGBA(241, 245, 249, 1)
LayoutMinHeight: =0
LayoutMinWidth: =0
OnSelect: =Set(varNavMenuOpen, If(varNavMenuOpen = "trigger1", "", "trigger1"))
PaddingLeft: =12
PaddingRight: =12
PressedFill: =RGBA(226, 232, 240, 1)
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Size: =10
Text: ="Getting started ▾"
Width: =150
- btnNavMenuTrigger2:
Control: Classic/Button@2.2.0
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderColor: =RGBA(0, 0, 0, 0)
BorderThickness: =0
Color: =RGBA(15, 23, 42, 1)
Fill: =If(varNavMenuOpen = "trigger2", RGBA(241, 245, 249, 1), RGBA(0, 0, 0, 0))
FocusedBorderThickness: =0
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(0, 0, 0, 0)
HoverColor: =Self.Color
HoverFill: =RGBA(241, 245, 249, 1)
LayoutMinHeight: =0
LayoutMinWidth: =0
OnSelect: =Set(varNavMenuOpen, If(varNavMenuOpen = "trigger2", "", "trigger2"))
PaddingLeft: =12
PaddingRight: =12
PressedFill: =RGBA(226, 232, 240, 1)
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Size: =10
Text: ="Components ▾"
Width: =140
- btnNavMenuTrigger3:
Control: Classic/Button@2.2.0
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderColor: =RGBA(0, 0, 0, 0)
BorderThickness: =0
Color: =RGBA(15, 23, 42, 1)
Fill: =If(varNavMenuOpen = "trigger3", RGBA(241, 245, 249, 1), RGBA(0, 0, 0, 0))
FocusedBorderThickness: =0
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(0, 0, 0, 0)
HoverColor: =Self.Color
HoverFill: =RGBA(241, 245, 249, 1)
LayoutMinHeight: =0
LayoutMinWidth: =0
OnSelect: =Set(varNavMenuOpen, If(varNavMenuOpen = "trigger3", "", "trigger3"))
PaddingLeft: =12
PaddingRight: =12
PressedFill: =RGBA(226, 232, 240, 1)
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Size: =10
Text: ="With Icon ▾"
Width: =110
- btnNavMenuTrigger4:
Control: Classic/Button@2.2.0
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderColor: =RGBA(0, 0, 0, 0)
BorderThickness: =0
Color: =RGBA(15, 23, 42, 1)
Fill: =RGBA(0, 0, 0, 0)
FocusedBorderThickness: =0
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(0, 0, 0, 0)
HoverColor: =Self.Color
HoverFill: =RGBA(241, 245, 249, 1)
LayoutMinHeight: =0
LayoutMinWidth: =0
OnSelect: =Notify("Docs — wire this to your real navigation once connected.", NotificationType.Information)
PaddingLeft: =12
PaddingRight: =12
PressedFill: =RGBA(226, 232, 240, 1)
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Size: =10
Text: ="Docs"
Width: =64
- panelNavMenuGettingStarted:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =RGBA(226, 232, 240, 1)
BorderThickness: =1
DropShadow: =DropShadow.Bold
Fill: =RGBA(255, 255, 255, 1)
Height: =204
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Visible: =(varNavMenuOpen = "trigger1")
Width: =320
X: =20
Y: =68
Children:
- galNavMenuGettingStarted:
Control: Gallery@2.15.0
Variant: Vertical
Properties:
DelayItemLoading: =false
Items: =[{Title:"Overview",Description:"Learn the basics and core concepts."}, {Title:"Installation",Description:"Step-by-step setup for your project."}, {Title:"Styling Guide",Description:"Typography, spacing, and color tokens."}]
ShowScrollbar: =false
TemplatePadding: =0
TemplateSize: =68
Height: =Parent.Height - 2
Width: =Parent.Width - 2
X: =1
Y: =1
Children:
- lblNavMenuGSTitle:
Control: Label@2.5.1
Properties:
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
Size: =10
Text: =ThisItem.Title
Height: =16
Width: =Parent.TemplateWidth - 24
X: =12
Y: =10
- lblNavMenuGSDesc:
Control: Label@2.5.1
Properties:
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
Size: =10
Text: =ThisItem.Description
Height: =28
Width: =Parent.TemplateWidth - 24
X: =12
Y: =28
- btnNavMenuGSHit:
Control: Classic/Button@2.2.0
Properties:
BorderColor: =RGBA(0, 0, 0, 0)
BorderThickness: =1
Color: =RGBA(0, 0, 0, 0)
Fill: =RGBA(0, 0, 0, 0)
FocusedBorderThickness: =0
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(226, 232, 240, 1)
HoverColor: =RGBA(0, 0, 0, 0)
HoverFill: =RGBA(0, 0, 0, 0)
OnSelect: =Notify("Wire this link to your real destination once connected.", NotificationType.Information)
PressedFill: =RGBA(0, 0, 0, 0)
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Text: =""
Height: =Parent.TemplateHeight
Width: =Parent.TemplateWidth
- panelNavMenuComponents:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =RGBA(226, 232, 240, 1)
BorderThickness: =1
DropShadow: =DropShadow.Bold
Fill: =RGBA(255, 255, 255, 1)
Height: =204
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Visible: =(varNavMenuOpen = "trigger2")
Width: =520
X: =20
Y: =68
Children:
- galNavMenuComponents:
Control: Gallery@2.15.0
Variant: Vertical
Properties:
DelayItemLoading: =false
Items: =[{Title:"Alert",Description:"Displays a short, important message to the user."}, {Title:"Hover Preview",Description:"Shows extra content when a user hovers a trigger."}, {Title:"Progress Bar",Description:"Indicates the completion progress of a task."}, {Title:"Scroll Panel",Description:"A scrollable region with a styled scrollbar."}, {Title:"Tab Group",Description:"Switches between related sections of content."}, {Title:"Tooltip",Description:"A small popup with info about an element."}]
ShowScrollbar: =false
TemplatePadding: =0
TemplateSize: =68
WrapCount: =2
Height: =Parent.Height - 2
Width: =Parent.Width - 2
X: =1
Y: =1
Children:
- lblNavMenuCompTitle:
Control: Label@2.5.1
Properties:
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
Size: =10
Text: =ThisItem.Title
Height: =16
Width: =Parent.TemplateWidth - 24
X: =12
Y: =10
- lblNavMenuCompDesc:
Control: Label@2.5.1
Properties:
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
Size: =10
Text: =ThisItem.Description
Height: =32
Width: =Parent.TemplateWidth - 24
X: =12
Y: =28
- btnNavMenuCompHit:
Control: Classic/Button@2.2.0
Properties:
BorderColor: =RGBA(0, 0, 0, 0)
BorderThickness: =1
Color: =RGBA(0, 0, 0, 0)
Fill: =RGBA(0, 0, 0, 0)
FocusedBorderThickness: =0
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(226, 232, 240, 1)
HoverColor: =RGBA(0, 0, 0, 0)
HoverFill: =RGBA(0, 0, 0, 0)
OnSelect: =Notify("Wire this link to your real destination once connected.", NotificationType.Information)
PressedFill: =RGBA(0, 0, 0, 0)
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Text: =""
Height: =Parent.TemplateHeight
Width: =Parent.TemplateWidth
- panelNavMenuIcons:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =RGBA(226, 232, 240, 1)
BorderThickness: =1
DropShadow: =DropShadow.Bold
Fill: =RGBA(255, 255, 255, 1)
Height: =108
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Visible: =(varNavMenuOpen = "trigger3")
Width: =180
X: =20
Y: =68
Children:
- galNavMenuIcons:
Control: Gallery@2.15.0
Variant: Vertical
Properties:
DelayItemLoading: =false
Items: =[{Label:"Backlog",IconPath:"<circle cx='12' cy='12' r='9'/><line x1='12' y1='8' x2='12' y2='13'/><line x1='12' y1='16' x2='12.01' y2='16'/>"}, {Label:"To Do",IconPath:"<circle cx='12' cy='12' r='9' stroke-dasharray='4 3'/>"}, {Label:"Done",IconPath:"<circle cx='12' cy='12' r='9'/><polyline points='8 12 11 15 16 9'/>"}]
ShowScrollbar: =false
TemplatePadding: =0
TemplateSize: =36
Height: =Parent.Height - 2
Width: =Parent.Width - 2
X: =1
Y: =1
Children:
- imgNavMenuIconGlyph:
Control: Image@2.2.3
Properties:
Image: |-
="data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='RGBA(71, 85, 105, 1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>" & ThisItem.IconPath & "</svg>")
Height: =16
Width: =16
X: =12
Y: =10
- lblNavMenuIconLabel:
Control: Label@2.5.1
Properties:
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
Size: =10
Text: =ThisItem.Label
Height: =16
Width: =Parent.TemplateWidth - 48
X: =36
Y: =10
- btnNavMenuIconHit:
Control: Classic/Button@2.2.0
Properties:
BorderColor: =RGBA(0, 0, 0, 0)
BorderThickness: =1
Color: =RGBA(0, 0, 0, 0)
Fill: =RGBA(0, 0, 0, 0)
FocusedBorderThickness: =0
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(226, 232, 240, 1)
HoverColor: =RGBA(0, 0, 0, 0)
HoverFill: =RGBA(0, 0, 0, 0)
OnSelect: =Notify("Wire this link to your real destination once connected.", NotificationType.Information)
PressedFill: =RGBA(0, 0, 0, 0)
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Text: =""
Height: =Parent.TemplateHeight
Width: =Parent.TemplateWidthImplementation
Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.
Something not pasting right? Troubleshooting guide