Place your (phone) navigation correctly with that simple TRICK!

Building responsive apps with Power Apps is getting better and better. We now have multiple templates to choose from, which can ease the dreaded blank page😅 But, if you build responsive, you need to think about the user interface (UI) and consequently the user experience (UX). And particularly the navigation.

So when your app is looking good on desktops and tablets, it might be a different story with the phone layout in Portrait mode (vertical) with regards to the navigation items. And that’s what we’re going to talk about today, with a simple trick that can be a time saver 🙂

Default layout

If you use a responsive template (i.e.: Sidebar template), containers are going to be responsive indeed, but the sidebar itself when it comes to a phone in portrait mode will be either at the top or worse, on the side… What we need is a navigation at THE BOTTOM so your thumbs can reach it naturally.

New navigation

Let’s start by adding containers to the main container (I started with a “sidebar” template) and creating our new navigation.

Now select cont_PhoneNav and change the following properties:

• Flexible height = Off
• Height = 80
• Insert a button (I’m using the modern controls) and rename it (best practice!)
• For the button, choose the properties to your liking (text & icon, icon only, etc…)
• Copy this button and paste it in the same container (cont_PhoneNav) for as many times as your need.

Now, select cont_PhoneNav and change:

• Justify (horizontal) = Center
• Align (vertical) = Center
• Gap = 15

When we play the app, we can see our new navigation at the bottom. Depending on the number of buttons you have, you would want to amend the size of each, and change the appearance of the Main Container.

Make it all work!

There’s only one thing left to do 😊 Depending on the size of the screen, let’s make a single navigation appear!

Select cont_PhoneNav, and enter the following formula in the Visible property:

If(Screen1.Size = ScreenSize.Small, true, false)

All the screen sizes can be found in the official documentation: Create responsive layouts in Canvas apps.

Then, copy the formula, and select your sidebar container (mine is SidebarContainer1), and enter the opposite (of the previous formula) in the Visible property:

If(Screen1.Size = ScreenSize.Small, false, true)

Now if we play the app, the navigations are displaying correctly.

More coming…

A new modern control called Toolbar is currently in Preview (at the time of writing this post). And once Generally Available (fingers crossed!), it could be used with the benefits of placing the icon & text in a more relevant fashion for a navigation.

Look at that!

Thanks for reading! 🙂