Back to LibraryNavigation & Pagination
Collapsible Side Navigation
Added Mar 25, 2026
A responsive side navigation menu that expands and collapses, displaying icons or icons with text, and shows the current user's profile.
Dark Mode
Said el ayyachi
CopySnips Live Preview
How to Use
- Copy the YAML snippet
- Paste it in Power Apps Studio with Ctrl+V
Problem Solved
Provides a responsive and easily customizable side navigation menu for Power Apps applications.
Integration
This component relies on a global variable `v_MenuExpand` to control its expanded/collapsed state. Initialize `Set(v_MenuExpand, false)` in `App.OnStart`. The menu items' `PageNavigation` property expects a Power Fx `Navigate` function call, e.g., `Navigate(Screen1, ScreenTransition.Fade)`.
YAML Code
- Container9_1:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
Height: =Parent.Height
Width: =If(v_MenuExpand,115,75)
Children:
- Container1_3:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Height: =Parent.Height
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =10
PaddingBottom: =15
PaddingLeft: =10
PaddingRight: =10
PaddingTop: =25
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Width: =Parent.Width
Children:
- Logo_3:
Control: Image@2.2.3
Properties:
AlignInContainer: =AlignInContainer.Center
Height: |
=50
LayoutMinHeight: =0
LayoutMinWidth: =0
PaddingBottom: =5
PaddingLeft: =5
PaddingRight: =5
PaddingTop: =5
RadiusBottomLeft: =100
RadiusBottomRight: =50
RadiusTopLeft: =50
RadiusTopRight: =50
Width: =70
- Container8_2:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
AlignInContainer: '=If(v_MenuExpand,AlignInContainer.Start,AlignInContainer.Center) '
DropShadow: =DropShadow.None
FillPortions: =0
Height: =35
RadiusBottomLeft: =10
RadiusBottomRight: =10
RadiusTopLeft: =10
RadiusTopRight: =10
Width: =35
Children:
- Image4_2:
Control: Image@2.2.3
Properties:
Height: =Parent.Height
Image: |-
="data:image/svg+xml;utf8, " & EncodeUrl(Substitute("<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-list' viewBox='0 0 16 16'>
<path fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/>
</svg>","currentColor", "RGBA(115, 131, 176, 1)"))
PaddingBottom: =5
PaddingTop: =5
Width: =Parent.Width
- Button4_2:
Control: Classic/Button@2.2.0
Properties:
BorderStyle: =BorderStyle.None
BorderThickness: =0
Color: =RGBA(255, 255, 255, 1)
Fill: =Color.Transparent
Height: =Parent.Height
HoverColor: =RGBA(255, 255, 255, 1)
HoverFill: =RGBA(0, 0, 0, 0.1)
OnSelect: =Set(v_MenuExpand, !v_MenuExpand);
PressedFill: =RGBA(0, 0, 0, 0.2)
Text: =
Width: =Parent.Width
- Gallery1_3:
Control: Gallery@2.15.0
Variant: Vertical
Properties:
DelayItemLoading: =false
Height: =Self.AllItemsCount * (Self.TemplateHeight + Self.TemplatePadding)
Items: |-
=Table({
MenuIcon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-house-fill' viewBox='0 0 16 16'>
<path d='M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z'/>
<path d='m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z'/>
</svg>",
MenuID:1,
MenuName:"Home",
PageNavigation:App.ActiveScreen
},
{
MenuIcon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-person-fill' viewBox='0 0 16 16'>
<path d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/>
</svg>",
MenuID:2,
MenuName:"Profile",
PageNavigation:App.ActiveScreen
},
{
MenuIcon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-file-bar-graph-fill' viewBox='0 0 16 16'>
<path d='M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2m-2 11.5v-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5m-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5z'/>
</svg>",
MenuID:3,
MenuName:"Folder",
PageNavigation:App.ActiveScreen
},
{
MenuIcon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-gear' viewBox='0 0 16 16'>
<path d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0'/>
<path d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z'/>
</svg>",
MenuID:4,
MenuName:"Settings",
PageNavigation:App.ActiveScreen
})
LayoutMinHeight: =0
LayoutMinWidth: =0
TemplatePadding: =0
TemplateSize: =50
Children:
- Container5_3:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
DropShadow: =DropShadow.None
Height: =Parent.TemplateHeight
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Width: =Parent.TemplateWidth
Children:
- Container6_3:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
DropShadow: =DropShadow.None
Fill: |-
=//If(Th.CurrentMenuID = ThisItem.MenuID, SideNavigation_Collapsible.SelectedIconBG , Color.Transparent)
RGBA(0, 0, 0, 0.04)
Height: =Parent.Height* 70%
RadiusBottomLeft: =10
RadiusBottomRight: =10
RadiusTopLeft: =10
RadiusTopRight: =10
Width: =If(v_MenuExpand,Parent.Width,Self.Height)
X: =(Parent.Width - Self.Width)/2
Y: =(Parent.Height - Self.Height)/2
Children:
- Image3_3:
Control: Image@2.2.3
Properties:
Height: =Parent.Height
Image: |-
=// "data:image/svg+xml;utf8, " & EncodeUrl(Substitute(ThisItem.MenuIcon,"currentColor", If(SideNavigation_Collapsible.CurrentMenuID = ThisItem.MenuID , SideNavigation_Collapsible.SelectedIconColor_Text , SideNavigation_Collapsible.BaseIconColor_Text)))
"data:image/svg+xml;utf8, " & EncodeUrl(Substitute(ThisItem.MenuIcon,"currentColor", "RGBA(254, 189, 47, 1)"))
PaddingBottom: =8
PaddingLeft: =8
PaddingRight: =8
PaddingTop: =8
Width: =Self.Height
- Label4_4:
Control: Label@2.5.1
Properties:
Color: =RGBA(37, 52, 100, 1)
Font: =Font.Lato
FontWeight: =FontWeight.Semibold
Height: =35
Size: =8
Text: =ThisItem.MenuName
Visible: =v_MenuExpand
Width: =Parent.Width - Self.X
X: =Image3_3.Width
- Button1_3:
Control: Classic/Button@2.2.0
Properties:
BorderColor: =Color.Transparent
BorderStyle: =BorderStyle.None
BorderThickness: =0
Color: =RGBA(255, 255, 255, 1)
Fill: =Color.Transparent
Height: =Parent.Height
HoverColor: =RGBA(255, 255, 255, 1)
HoverFill: =RGBA(0, 0, 0, 0.1)
OnSelect: =Navigate(ThisItem.PageNavigation)
PressedFill: =RGBA(0, 0, 0, 0.2)
Text: =
Width: =Parent.Width
- Container2_3:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
FillPortions: =0
Height: =40
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutJustifyContent: =LayoutJustifyContent.Center
LayoutMinWidth: =40
PaddingLeft: =5
PaddingRight: =5
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Children:
- Container3_3:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
AlignInContainer: =AlignInContainer.Center
BorderColor: =RGBA(12, 59, 94, 1)
BorderThickness: =1
DropShadow: =DropShadow.None
FillPortions: =0
Height: =Self.Width
LayoutMinHeight: =35
RadiusBottomLeft: =35
RadiusBottomRight: =35
RadiusTopLeft: =35
RadiusTopRight: =35
Width: =30
Children:
- Image2_3:
Control: Image@2.2.3
Properties:
Height: =Parent.Height
Image: =User().Image
RadiusBottomLeft: =35
RadiusBottomRight: =35
RadiusTopLeft: =35
RadiusTopRight: =35
Width: =Parent.Width
Y: |
=0
- Label4_5:
Control: Label@2.5.1
Properties:
AlignInContainer: =AlignInContainer.Stretch
Color: =RGBA(37, 52, 100, 1)
FillPortions: =1
Font: =Font.Lato
FontWeight: =FontWeight.Semibold
LayoutMinHeight: =0
LayoutMinWidth: =0
PaddingRight: =0
Size: =9
Text: =User().FullName
Visible: =v_MenuExpand
Width: =Parent.Width - Self.X
X: =Image3_3.Width
Y: =35Implementation
Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.
Something not pasting right? Troubleshooting guide