Powerapps – Display a dynamic breadcrumb navigation

Does a customer already told you, by creating many screens into Powerapps, where am I ? To avoid to lost them, let’s display a dynamic breadcrumb navigation to let them know where they are and how they get there.

Description of my demo

So in my demo, I have 4 screens. On the top of the screen, I will display the breadcrumb navigation.


I also have some back button to get to the previous page and an home button to get to the home page.
![](/content/images/2019/12/PowerAppsBreadCrumbSchema.png)

Implementation

So basically our navigation is going to be saved into a collection.
So let’s start by adding on the ‘OnVisible’ Home screen (screen 1) property, the following command which will reset our navigation. As there is no screen before the home page, let’s restart our navigation everytime we reach the home page.

ClearCollect(BreadCrumbNav,"Screen 1")

And on the other screen, on the ‘OnVisible’ property, we need to add to the collection the screen where we are. Of course we will check if the last screen isn’t the current one to avoid issues. Example with the screen 2.

If(Last(BreadCrumbNav).Value <> "Screen 2",Collect(BreadCrumbNav,"Screen 2"))

Don’t forget to remove the screen while clicking on the back button. Example of the back button on the screen 2.

Back();RemoveIf(BreadCrumbNav,Value = "Screen 2")

On the home button nothing to do except going back to the home page, as it will restart your navigation.

Now we just have one last thing to do, on the Breadcrumb label, we just need to concatenate the value of the collection which contains our navigation. This label will have to be on all the page where you want to display your navigation.

Concat(BreadCrumbNav, Value, " > ")

Demo

Let’s try the solution !