Side navigation

A white navigation panel with brand, menu items with icons and count badges, a highlighted active item and the user at the bottom.

Overview

A full-height menu column in the style of modern admin panels: brand at the top, a small section label, menu items with an icon, a label and an optional count badge, and the signed-in user pinned to the bottom.

The active item gets a soft tint of the theme colour, a filled icon and bold text. Each item is a row in a gallery with a transparent button on top that catches the click, so the whole row is clickable and keyboard-accessible.

When to use

Apps with four to eight main screens that people switch between often.
Tablet and desktop layouts where a 248 pixel column fits next to the content.

When not to use

Phone layouts: use a tab bar or a menu behind a button.
Apps with two or three screens, where tabs or buttons on the screen are clearer.

Controls used

Control	Version
GroupContainer	`1.5.0`
ModernIcon	`1.1.1`
ModernText	`1.0.0`
Gallery	`2.15.0`
ModernBadge	`1.0.0`
ModernButton	`1.0.0`
ModernAvatar	`1.1.0`

YAML

Works as is, with example data inline. Paste it into a screen or container; the steps are underHow to paste.

Not yet verified in Power Apps Studio. The control versions are drafted from documentation. If Studio flags one, see How to paste for the fix.

component.yaml

- SideNavRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      DropShadow: =DropShadow.Light
      Fill: =Color.White
      Height: =Parent.Height
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =4
      PaddingBottom: =16
      PaddingLeft: =16
      PaddingRight: =16
      PaddingTop: =16
      RadiusBottomLeft: =0
      RadiusBottomRight: =0
      RadiusTopLeft: =0
      RadiusTopRight: =0
      Width: =248
    Children:
      - SideNavBrand:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =40
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =10
            LayoutMinHeight: =40
            LayoutMinWidth: =120
          Children:
            - SideNavBrandIcon:
                Control: ModernIcon@1.1.1
                Properties:
                  AccessibleLabel: ="App logo"
                  Fill: =App.Theme.Colors.Primary
                  Height: =32
                  Icon: ="Building"
                  IconColor: =Color.White
                  LayoutMinHeight: =32
                  LayoutMinWidth: =32
                  PaddingBottom: =7
                  PaddingLeft: =7
                  PaddingRight: =7
                  PaddingTop: =7
                  RadiusBottomLeft: =8
                  RadiusBottomRight: =8
                  RadiusTopLeft: =8
                  RadiusTopRight: =8
                  Width: =32
            - SideNavBrandName:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  FillPortions: =1
                  FontWeight: =FontWeight.Semibold
                  Height: =32
                  LayoutMinHeight: =0
                  LayoutMinWidth: =80
                  Size: =16
                  Text: ="Field Ops"
                  Wrap: =false
      - SideNavSection:
          Control: ModernText@1.0.0
          Properties:
            AccessibleLabel: =Self.Text
            AlignInContainer: =AlignInContainer.Stretch
            Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
            FontWeight: =FontWeight.Semibold
            Height: =36
            LayoutMinHeight: =0
            LayoutMinWidth: =80
            PaddingTop: =12
            Size: =11
            Text: ="MAIN MENU"
      - SideNavGallery:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            AccessibleLabel: ="Navigation menu"
            AlignInContainer: =AlignInContainer.Stretch
            BorderThickness: =0
            FillPortions: =0
            Height: =Self.AllItemsCount * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePadding
            # Screen holds a name here; put real screen references in your own table.
            Items: |
              =Table(
                  {Label: "Dashboard", Icon: "Home", Count: 0, Screen: "HomeScreen"},
                  {Label: "Inspections", Icon: "Notebook", Count: 12, Screen: "InspectionsScreen"},
                  {Label: "Calendar", Icon: "Calendar", Count: 0, Screen: "CalendarScreen"},
                  {Label: "Team", Icon: "People", Count: 3, Screen: "TeamScreen"},
                  {Label: "Settings", Icon: "Settings", Count: 0, Screen: "SettingsScreen"}
              )
            LayoutMinHeight: =0
            LayoutMinWidth: =120
            ShowScrollbar: =false
            TabIndex: =0
            TemplatePadding: =2
            TemplateSize: =40
          Children:
            - SideNavItem:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =If(ThisItem.IsSelected, App.Theme.Colors.Lighter80, Color.Transparent)
                  Height: =Parent.TemplateHeight
                  LayoutAlignItems: =LayoutAlignItems.Center
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutGap: =10
                  PaddingLeft: =10
                  PaddingRight: =10
                  RadiusBottomLeft: =8
                  RadiusBottomRight: =8
                  RadiusTopLeft: =8
                  RadiusTopRight: =8
                  Width: =Parent.TemplateWidth
                  X: =0
                  Y: =0
                Children:
                  - SideNavItemIcon:
                      Control: ModernIcon@1.1.1
                      Properties:
                        AccessibleLabel: =ThisItem.Label
                        Height: =20
                        Icon: =ThisItem.Icon
                        IconColor: =If(ThisItem.IsSelected, App.Theme.Colors.Primary, ColorFade(App.Theme.Colors.Darker70, 35%))
                        IconStyle: =If(ThisItem.IsSelected, IconStyle.Filled, IconStyle.Outline)
                        LayoutMinHeight: =20
                        LayoutMinWidth: =20
                        Width: =20
                  - SideNavItemLabel:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        Color: =If(ThisItem.IsSelected, App.Theme.Colors.Primary, ColorFade(App.Theme.Colors.Darker70, 15%))
                        FillPortions: =1
                        FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal)
                        Height: =30
                        LayoutMinHeight: =0
                        LayoutMinWidth: =60
                        Size: =14
                        Text: =ThisItem.Label
                        Wrap: =false
                  - SideNavItemCount:
                      Control: ModernBadge@1.0.0
                      Properties:
                        AccessibleLabel: =ThisItem.Count & " new"
                        Appearance: =BadgeAppearance.Tint
                        Content: =Text(ThisItem.Count)
                        Height: =20
                        Intent: =BadgeIntent.Informative
                        LayoutMinHeight: =20
                        LayoutMinWidth: =28
                        Size: =11
                        Visible: =ThisItem.Count > 0
                        Width: =28
            - SideNavItemButton:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =ThisItem.Label
                  Appearance: =ButtonAppearance.Transparent
                  Height: =Parent.TemplateHeight
                  Layout: =ButtonLayout.TextOnly
                  OnSelect: |
                    =Select(Parent);
                    Notify("Navigate to " & ThisItem.Screen, NotificationType.Information)
                  Size: =14
                  Text: =""
                  Width: =Parent.TemplateWidth
                  X: =0
                  Y: =0
      - SideNavSpacer:
          Control: GroupContainer@1.5.0
          Variant: ManualLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =1
            LayoutMinHeight: =0
            LayoutMinWidth: =0
      - SideNavUser:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
            BorderThickness: =1
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =56
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =10
            LayoutMinHeight: =56
            LayoutMinWidth: =120
            PaddingLeft: =10
            PaddingRight: =10
            RadiusBottomLeft: =10
            RadiusBottomRight: =10
            RadiusTopLeft: =10
            RadiusTopRight: =10
          Children:
            - SideNavUserAvatar:
                Control: ModernAvatar@1.1.0
                Properties:
                  AccessibleLabel: =User().FullName
                  Badge: =PresenceBadge.None
                  Height: =32
                  Image: =User().Image
                  LayoutMinHeight: =32
                  LayoutMinWidth: =32
                  Name: =User().FullName
                  Width: =32
            - SideNavUserName:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  FillPortions: =1
                  FontWeight: =FontWeight.Semibold
                  Height: =30
                  LayoutMinHeight: =0
                  LayoutMinWidth: =60
                  Size: =13
                  Text: =User().FullName
                  Wrap: =false

Make it yours

The example runs on sample data. Replace these properties to connect it to your app.

`Items` on `SideNavGallery`

One row per menu item. Count shows a badge when it is above zero. Put screen references in Screen in your own table; the example uses names so it works without those screens.

In the YAML

YAML

Items: |
  =Table(
      {Label: "Dashboard", Icon: "Home", Count: 0, Screen: "HomeScreen"},
      {Label: "Inspections", Icon: "Notebook", Count: 12, Screen: "InspectionsScreen"},
      {Label: "Calendar", Icon: "Calendar", Count: 0, Screen: "CalendarScreen"},
      {Label: "Team", Icon: "People", Count: 3, Screen: "TeamScreen"},
      {Label: "Settings", Icon: "Settings", Count: 0, Screen: "SettingsScreen"}
  )

Your version

YAML

Items: |
  =Table(
      {Label: "Dashboard", Icon: "Home", Count: 0, Screen: HomeScreen},
      {Label: "Inspections", Icon: "Notebook", Count: CountRows(Filter(Inspections, Status = "Open")), Screen: InspectionsScreen},
      {Label: "Settings", Icon: "Settings", Count: 0, Screen: SettingsScreen}
  )

`OnSelect` on `SideNavItemButton`

Navigates to the screen in the row. Keep Select(Parent) so the highlight follows the selection.

In the YAML

YAML

OnSelect: |
  =Select(Parent);
  Notify("Navigate to " & ThisItem.Screen, NotificationType.Information)

Your version

YAML

OnSelect: |
  =Select(Parent);
  Navigate(ThisItem.Screen, ScreenTransition.None)

`Text` on `SideNavBrandName`

The name next to the logo tile.

In the YAML

YAML

Text: ="Field Ops"

Your version

YAML

Text: ="Site audits"

How to paste

Open your app in Power Apps Studio.
Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
Copy the YAML with the Copy button above the code.
In the Tree view, select the screen or container that should hold the component and press Ctrl+V. The whole component arrives as one container, SideNavRoot, with all its controls inside.
Work through Make it yours to swap the example data for your own.

Where your version of Studio has a code view for a control or screen, you can paste the same YAML there instead of into the tree view.

When Studio flags a control version

Each control in the YAML names its version, like Control: ModernButton@1.0.0. If that version is newer than what your environment knows, Studio falls back to the version it has or flags the control. All controls of one type in an app must also use the same version, so an app that already has an older ModernButton can reject the paste. To fix it, insert the same control from the Insert pane, copy it as code, note the version on its Control: line, update every matching line in the YAML and paste again.

Missing a component, or did this one not paste cleanly? Suggest a component or report an issue.

Side navigation

Overview

When to use

When not to use

Controls used

YAML

Make it yours

Items on SideNavGallery

OnSelect on SideNavItemButton

Text on SideNavBrandName

How to paste

When Studio flags a control version

`Items` on `SideNavGallery`

`OnSelect` on `SideNavItemButton`

`Text` on `SideNavBrandName`