PowerApps Canvas App Part I: Creating a Reusable Menu Component

Building apps faster and smarter often starts with creating reusable components. One of the most effective ways to improve consistency and reduce maintenance in PowerApps Canvas Apps is by building a reusable menu component. Yes, you can create a single menu that updates everywhere by changing it once.

This article covers everything you need to create a flexible, reusable menu component step-by-step.

Why Build a Reusable Menu?

A reusable menu offers:

Consistency across screens
Reduced maintenance by updating once
Faster development by reusing ready-made controls
Cleaner app structure for easier future changes

Instead of copy-pasting menus on every screen, a single component saves time and prevents errors.

Setting Up the Menu Component

Follow these steps to create your reusable menu:

1. Create a New Component

Go to the Tree View panel.
Select Components and click + New component.
Name it cmp_Menu.

2. Add a Gallery for Menu Items

Insert a Vertical Gallery inside the component.
Set the Items property to a table of menu options:

Table(
    {Label: "Home", Icon: Icon.Home, Screen: 'HomeScreen'},
    {Label: "Profile", Icon: Icon.Contact, Screen: 'ProfileScreen'},
    {Label: "Settings", Icon: Icon.Settings, Screen: 'SettingsScreen'}
)

Remove the default image and text controls inside the gallery.
Insert an Icon and Label side by side inside the gallery template.

3. Customize the Appearance

Set the Icon to ThisItem.Icon.
Set the Label to ThisItem.Label.
Style the items with padding, hover effects, and selected states.

Example for hover fill:

If(ThisItem.IsSelected, Color.LightBlue, Color.White)

4. Add a Navigation Function

Inside the OnSelect property of the gallery:

Navigate(ThisItem.Screen, ScreenTransition.Fade)

This makes the menu interactive, navigating users to the correct screens.

Making the Menu Truly Reusable

A good component accepts flexible data. Update the component to accept an external data source:

Create a new custom property:
- Property Name: MenuItems
- Property Type: Table
Update the Items property of the gallery:

If(
    IsEmpty(MenuItems),
    Table(
        {Label: "Home", Icon: Icon.Home, Screen: 'HomeScreen'},
        {Label: "Profile", Icon: Icon.Contact, Screen: 'ProfileScreen'},
        {Label: "Settings", Icon: Icon.Settings, Screen: 'SettingsScreen'}
    ),
    MenuItems
)

This way, you can pass different menus to the component without editing it directly.

Best Practices for the Menu Component

Use theme colors to match your app’s design system.
Group icons and labels properly using flexible height and width.
Include accessibility support by using tooltips and meaningful labels.
Test screen navigation thoroughly across different screen sizes.

Wrapping Up

A reusable menu component keeps your Canvas App organized and easy to scale. Instead of rebuilding the same structure over and over, you create it once and reuse it intelligently. Building on this idea, the next step focuses on user dialogs. See PowerApps Canvas App Part II: Creating a Basic Dialog Window to continue building your app toolkit.

Software Engineering & Development