Create a navigation model for your canvas app


For a user, a navigation menu gives an overall perspective of the services an app has to offer. So it's also important to have such a menu available throughout the app. From the maker standpoint, the menu needs to be easy to make and easy to update.

Overview of a navigation menu

A navigation menu can be built using individual buttons or using a collection in a gallery. Adding individual buttons takes more time and effort to align their X and Y positions and to match their height and width. However, button navigation is still required for scenarios where only one or two buttons are needed. Below is an example of a home screen for a Device Request app that has two buttons.

Screenshot of the Device Request App with two buttons.

When a navigation menu contains multiple options, then using a combination of a collection (or data source) and a gallery is a better option. This way formatting the X and Y location and the height and width is automatically taken care of.

Screenshot of the GalMenu with the formula for Items set to ColScreenNav.

Use a data source

Having the menu content connected to the data source gives the flexibility to modify the menu without having to modify the app design in the canvas studio. Take, for example, a SharePoint list. The menu can be added as items in the list as shown below.

Screenshot of SharePoint showing Power Apps App Menu list of items.

This list is then connected to Power Apps as a SharePoint data source.

Screenshot of the Items formula set to 'Power Apps App Menu.'

Use a collection

You also have the flexibility to create a collection inside the canvas app using the App OnStart property. Then you can populate that collection in a gallery as a menu like a SharePoint list.

Screenshot of the OnStart formula set to ClearCollect(ColScreenNav) with each item set out with ID and ScreenName.

Next, add a Vertical gallery.

Screenshot of the Insert tab with the Gallery menu dropped down and Vertical highlighted.

With Gallery1 selected, select ColScreenNav. That will replace the default CustomGallerySample in the Items.

Screenshot of the Items formula set to CustomGallerySample.

Next, add a button inside the gallery and change its Text property to ThisItem.ScreenName.

Screenshot of the Home Screen button with the Text formula set to ThisItem.ScreenName.

You can now delete the remaining controls inside Gallery1 except Button1 and also resize the Template size.

Screenshot of the Home Screen button selected and its Template size property set to 80.

Screenshot of the ColScreenNav items gallery.

A similar process can be followed to create a horizontal menu using the Horizontal gallery.

Screenshot of the Insert tab with the Gallery menu dropped down and the Horizontal gallery highlighted.