Introduction

Here is a quick end to end build of a solution for adding navigation to your PowerApps using the Gallery control and a Collection.

Use Case

If you have an app with multiple pages within it, managing the navigation can be difficult - you end up repeating work on each page.

Overview

Here’s a quick rundown of the solution:

Create a collection to store the navigation’s labels and screens.
Use a Gallery to display the collections values and perform the navigation
Use Global Variable to keep track of what has been selected
We tried to keep it as simple as possible: Two controls and a Collection

Build

Step 1: Create a Collection

Assuming you’ve already created the pages for your app, you can load a Collection with the values for your PowerApps navigation. I suggest binding it to your PowerApp’s OnStart event.

NOTE: Screen1 (below) is a reference to the name of a screen in your app that you’d like to navigate to.

ClearCollect(collAppNav, {title:"Nav 1", screen:Screen1}, {title:"Nav 2", screen:screenHazards},{title:"Nav 3", screen:Screen2} )

Build your navigation collection when the app starts

Step 2: Build Your Gallery

Add a Gallery Control to your PowerApp’s screen
Set the Gallery’s Items property to:
- ```
collAppNav
```

Step 3: Add a Button to your Gallery template

Add a Button to the Gallery template
Set the Button’s Text property to:
- ```
 ThisItem.title
```
Set the Button’s OnSelect to:
- ```
Set(currNav,ThisItem.title);Navigate(ThisItem.screen, Transition.None)
```
- This sets a variable that keeps track of the currently selected screen and navigates you to the next screen

Create a gallery of buttons.

Step 4: Style the Button

Set the Button’s Underline property to

If(currNav = ThisItem.title, true, false)

Step 5: Copy and Paste the Gallery

Copy and Paste the Gallery onto the other screens in your app.

Conclusion

Nothing too fancy here! Quick and easy navigation for your next PowerApp.

PowerApps Tutorial: Building Navigation using a Gallery