Build a Reusable Sidebar Navigation Component

Building a maintainable canvas app means avoiding duplication of UI logic. One of the most common repeated pieces is a navigation sidebar that appears on every screen. By designing a single component and feeding it a table of menu items, you can define the navigation once and reuse it everywhere. In this walkthrough, you’ll create a tailor‑made sidebar component that supports icons, text, a current‑screen indicator, and hover/selected states.

Your scenario: A regional sales app

Imagine you work for a company that tracks sales across four regions. The app needs separate screens for each region plus global screens for dashboards and settings. You’ll build a navigation component that can accept different menu structures and highlight the active page.

Each menu item will have three pieces of information:

• DisplayName – the label shown to the user.
• MenuIcon – the Power Apps icon displayed beside the label.
• Destination – the name of the screen to navigate to.

Creating the component

Open Power Apps Studio and create a new blank canvas app. Switch to the Components tab and create a new component. Name it nav_Sidebar.

Set the component’s Fill property to a dark background:

RGBA(40, 45, 70, 1)

Custom input properties

The component must be driven by data from the host app. Add the following custom input properties (make them all public):

The ActiveItem property will hold the DisplayName of the currently selected screen so the component can highlight it.

Building the gallery

Inside the component insert a Blank vertical gallery. Rename it to gal_Nav.

Set the gallery’s key properties:

nav_Sidebar.NavItems

• Height: Parent.Height
• Width: 80
• TemplateSize: Parent.Height / 8
• ShowScrollbar: false
• TemplatePadding: 0
• OnSelect: Navigate(ThisItem.Destination)

Now add the visual elements inside the gallery template.

Icon and label

Insert an icon and position it at the top centre of each gallery item:

Icon = ThisItem.MenuIcon
Color = nav_Sidebar.TextColor
Height = 35
Width = 35
X = (Parent.TemplateWidth - Self.Width) / 2
Y = 15

Add a label below the icon to show the menu text:

Text = ThisItem.DisplayName
Align = Center
Size = 10
Width = Parent.TemplateWidth
X = 0
Y = 50

Active screen indicator

A thin vertical bar should appear on the left side of the active menu item. Insert a label (no text) in the gallery and give it these properties:

Fill = nav_Sidebar.IndicatorColor
Height = Parent.TemplateHeight
Visible = ThisItem.DisplayName = nav_Sidebar.ActiveItem
Width = 5
X = 0
Y = 0

Position this label so it overlaps the left edge of the gallery item.

Hover and selected states

To give visual feedback when the user hovers or presses a menu item, add another label (no text) that covers the entire gallery item. Place it on top of the other controls (use Bring to front if needed).

Height = Parent.TemplateHeight
Width = Parent.TemplateWidth
Fill = If(ThisItem.DisplayName = nav_Sidebar.ActiveItem, nav_Sidebar.SelectedBg, Transparent)
HoverFill = nav_Sidebar.HoverBg
PressedFill = nav_Sidebar.SelectedBg
OnSelect = Navigate(ThisItem.Destination)

Because this label sits on top, its OnSelect will fire when the user clicks anywhere on the menu item. The icon and label behind it can keep their own OnSelect empty.

Finally, reduce the component’s own height to something like 700 and width to 80 so it resembles a sidebar.

Consuming the component in your app

Create the screens you need for the sales scenario:

• Dashboards
• RegionNorth
• RegionEast
• RegionSouth
• RegionWest
• Settings

Store the menu items in a variable when the app starts. Put this code in App.OnStart and then run it:

Set(gblNav,
Table(
  {DisplayName: "Dashboards", MenuIcon: Icon.Home, Destination: "Dashboards"},
  {DisplayName: "North Region", MenuIcon: Icon.MapDirections, Destination: "RegionNorth"},
  {DisplayName: "East Region", MenuIcon: Icon.MapDirections, Destination: "RegionEast"},
  {DisplayName: "South Region", MenuIcon: Icon.MapDirections, Destination: "RegionSouth"},
  {DisplayName: "West Region", MenuIcon: Icon.MapDirections, Destination: "RegionWest"},
  {DisplayName: "Settings", MenuIcon: Icon.Settings, Destination: "Settings"}
)
)

Now on each screen insert the nav_Sidebar component. Set its NavItems property to gblNav.

For the ActiveItem property, supply the DisplayName that matches the current screen. For example, on the Dashboards screen:

"Dashboards"

On RegionNorth:

"North Region"

Repeat for every screen. If you rename a screen later, remember to update the menu table and the ActiveItem values.

Performance notes

• Use a global variable (Set) rather than a collection to store the menu table. The data is static while the app runs, so a variable avoids unnecessary overhead.
• Component properties are re‑evaluated only when their inputs change, making the sidebar efficient even when placed on many screens.
• The Navigate(ThisItem.Destination) call is direct; no extra lookups needed.

Common mistakes and troubleshooting

• No indicator on the active item Double‑check that ActiveItem is set on every screen and that it exactly matches a DisplayName value (case‑sensitive).

• Gallery items overlap or look crowded Adjust TemplateSize so that the combined height of icon + label fits. A value of Parent.Height / 8 works well for six items.

• Hover effect not working The label with HoverFill must be the topmost control in the gallery template. Use Bring to front on it.

• Navigate fails with blank screen Verify that the screen names in the Destination column are spelled correctly. Screen names are case‑sensitive in Power Apps.

Extending the component

You can enhance this sidebar without breaking existing screens:

• Add a collapsible sub‑menu by nesting galleries or using toggles.
• Expose a custom function to expand/collapse the sidebar width.
• Export the component to a component library and share it across multiple apps.

Final recommendation

A well‑built navigation component saves hours of repetition and keeps your app’s UI consistent. By exposing colors, icons, and the active screen as properties, you give yourself (and future makers) a flexible building block. Start with the design described here, then adapt it to match your brand and information architecture.

References

• Original inspiration and technique: Matthew Devaney, “Power Apps Navigation Menu Component” – https://www.matthewdevaney.com/power-apps-navigation-menu-component/
• Microsoft Learn: Canvas components overview – https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/create-component
• Microsoft Learn: Navigate function – https://learn.microsoft.com/en-us/power-platform/power-fx/reference/function-navigate