Create a Responsive Navigation Menu in Power Apps [Using Modern Tab List]

When building apps in Power Apps, having a navigation menu that works well on all devices is really important. Whether your users are on a phone, tablet, or desktop, a responsive menu makes it easy for them to move around the app.

In this Power Apps tutorial, I will discuss how to create a responsive navigation menu in Power Apps using a Modern Tab list control step by step.

Create a Responsive Navigation Menu in Power Apps

To create a Power Apps responsive navigation menu (horizontally & vertically), follow the steps below:

Step – 1:

Sign in to Power Apps, then click + Create and select Start with a page design.

Power Apps, by default, provides various page designs to create the app. To create a responsive left navigation menu, select the Sidebar.

NOTE:

If you want to add this screen to an existing application, then go to New screen from top -> Select Sidebar screen.

Step – 2:

After a while, the app has been created with two containers, i.e.

• Screen Container (Vertical container): It contains a Header container where we can add a header or title.
• Bottom Container (Horizontal container): It contains two vertical containers, such as:
  • Sidebar Container where we can create a UI left navigation menu.
  • Main Container where we can add any other controls based on your needs.

Now, if you preview the app, you can see different sizes based on the different layouts (Tablet, Mobile, Desktop/Window/Canvas).

Step – 3:

To make the left navigation look nicer, we can adjust its size to fit our desired appearance. In this example, I’ll make the sidebar a little narrower.

To do this, select the Sidebar container and turn off the Flexible width option in the properties pane.

Once we turn it off, a property called Width will appear, where we can specify our width by providing a number (for example, 250). By default, the width is set to 500.

Now, preview the app and check all the layouts. You will notice that whenever you select the Mobile layout, a blank space is added to the right side of the sidebar, which is unexpected.

Step – 4:

To avoid the blank space in the Mobile view, we need to write the code below on the Sidebar Container’s Width property:

If(Screen1.Size = 1, Parent.Width, 250)

The above code specifies that if the screen size is 1 (which is for mobile), the width will match the parent’s width. For other layouts, such as tablets or desktops, the width will always be 250.

Now, if we preview the app and select the mobile layout, the space won’t be visible. It’ll divide the size correctly, as shown below:

Step – 5:

Next, select the Sidebar container and set the code below on its AlignInContainer property:

If(
    Screen1.Size = 1,
    AlignInContainer.Start,
    AlignInContainer.Stretch
)

Screen1 = Screen Name

The above code specifies that if the screen size is a mobile device, then the container alignment should start with ‘start’; otherwise, it should ‘stretch.’

Also, resize the Side container Height property to 75.

75

Preview the app. It will work perfectly for both tablet and desktop devices as expected. But when you switch to the mobile device, a blank space will appear under the sidebar container, as shown below.

Step – 6:

To avoid the blank space in mobile view, select the Main container and set its Minimum height/LayoutMinHeight property as:

Parent.Height

Now, when you preview it on a mobile layout, the blank space won’t show up.

Step – 7: [Add Modern Tab list control]

To create a responsive navigation menu, we will add a Modern Tab list control. Select the Sidebar container + icon and insert a Modern Tab list:

Before adding any new modern controls to the app, ensure that Modern controls and themes are enabled. Otherwise, modern controls won’t be visible.

NOTE:

Go to Settings -> Updates -> New -> Enable Modern controls and themes.

Step – 8:

The modern tab list has been added inside the Sidebar container. Now set it’s properties below:

Align in container = Stretch
Flexible height = Enable
LayoutMinWidth = Parent.Width - 10

Step – 9:

The tab list control provides an important property called Alignment. There are two types of alignments, i.e.

• Horizontal
• Vertical

Now, I want to change the menu’s alignment based on the screen size. For example, if the screen is a tablet or desktop, the menu should be vertical. However, if it’s a mobile screen, the menu should switch to a horizontal layout.

To work around this, set the code below to tab list control’s Alignment property:

If(
    Screen1.Size = 1,
    'TabList.Alignment'.Horizontal,
    'TabList.Alignment'.Vertical
)

If the view is on a mobile device, the tab list will show horizontally; otherwise, it will display vertically on tablets and desktops.

Step – 10: [Set items for Tab list control]

To insert items/menus inside the Tab list control, we will add the formula to the App’s Formulas property as:

LeftNavData = [
    {
        MenuTitle: "🏡 Home",
        GoToScreen: Screen1
    },
    {
        MenuTitle: "📊 Dashboard",
        GoToScreen: Screen2
    },
    {
        MenuTitle: "⁉️ FAQs",
        GoToScreen: Screen3
    },
    {
        MenuTitle: "⚙️ Settings",
        GoToScreen: Screen4
    }
];

Where,

• LeftNavData = Formula name
• MenuTitle = Specify the menu names
• GoToScreen = Provide the specific screen names for the specific menu title

Select the Tab list control and set its Items property to the formula name:

LeftNavData

Once you provide it, you will notice that tab list items appear with digits, which is incorrect. It should display all the menu titles.

To achieve this, go to the Tab list properties pane -> Select Display -> Click Edit from the Fields option -> + Add field -> Select MenuTitle -> Click Add.

Now, all the menu titles will display correctly in the tab list control.

Step – 11:

Go to the OnSelect property of the Tab list control and paste the code below:

Navigate(Self.Selected.GoToScreen)

Step – 12:

Similarly, go to its DefaultSelectedItems property and set the formula below:

LookUp(
    LeftNavData,
    GoToScreen = App.ActiveScreen
)

Step – 13:

That’s it to do. Finally, save, publish, and preview your app. Test it on a tablet, canvas, or window view, and you’ll see the responsive left navigation menu appear in a vertical layout, just like the image below.

Similarly, if you switch to a mobile layout, the responsive left navigation menu will appear horizontally with a More (…) option. Users can tap any menu item to navigate to the corresponding screen.

I hope this guide helped you learn how to create a responsive navigation menu in Power Apps using the modern tab list. Whether the users are on a desktop, tablet, or mobile device, this menu adjusts to fit the screen, making it easy for them to find what they need.

Also, you may like some more Power App tutorials:

• Create a Plan Using Power Apps Plan Designer
• Calculate Age in Power Apps
• Power Apps DateDiff() Function
• Power Apps Modern Form Control
• Create Multi-Select Checkboxes in Power Apps From a SharePoint List
• Set Default Value in Power Apps Modern Radio Button
• Power Apps LastSubmit()