Build a Left Navigation Menu for Power Apps in 5 minutes

In this video, I show a step by step walkthrough of building a responsive Left Navigation Menu in Power Apps which can be reused across multiple screens and canvas apps. The method I demonstrate involves using the modern tab list control to turn it into a vertical navigation menu for your canvas Power Apps needs. There are some tricks involved in getting it to function as a navigation menu which I covered step by step in this video.

#powerapps #powerplatform
Table of Contents:

00:00 - Add the Control
00:17 - Connect to Data
02:11 - Changing the orientation
02:50 - Make the Menu Clickable
04:52 - Other Uses
05:12 - Styling Options
06:09 - Wrap Up

[robborghmans]

Love it !!! After watching your video I used it for my new application and my customers liked it. Thanks for the instructions.

[gonzalezmoreira]

Hi, April! I have seen other expandable menu versions and all that, but not with this new control! Definitely, much faster to implement and with an attractive design! You really just need to put some icons on that menu... Is it possible? Otherwise, perfect! Thanks for sharing ;-)

[JonEricE-nk]

This is great!! I was using a gallery that was much more intuitive!

[jej]

Hey there! I'm wondering if there's a way to make the left navigation minimize and expand when I hover over it with the mouse. I want to save space for other content. Currently, I'm using arrow icons to minimize the sidebar and smaller icons for navigation. The tabs really improve my user experience and are working great!

[mikecorbean]

Hi April! New sub here. Great content and teaching style. Quick question: Who can I share my PowerApps with? Anyone I desire or do they have to be in my organization or do they have to be MS 365 users, etc?

[chrisparent]

Hi April, I followed your video. This is brilliant, but I have an issue. I have to click twice on the side bar item in order for the item to show selected. I am currently testing the setup you have in the video. Any thoughts on what may cause this, and how I can elimiate the double click?

[bitokay]

how are you adding the svg icons if you decide to add next to each menu page

[sankhlayashraj]

This is super April. Want to know how we can add icons to the same…

[dougydoe]

Brilliant Technique. Thanks for the quick video but extremely useful

[JKVIdaho]

I just love your videos April, you had me hooked as a subscriber when I started down the path of power automate and now I'm diving down the rabbit hole of PowerApps so that I can update a huge SharePoint List (customize form option). If you've got any soup to nuts videos on customizing a massive SP List with multiple tabs, point the way. This video really helped though, so thank YOU! I'd been struggling because I wanted a tab list that was responsive like this. PLUS when you showed multiple tab lists in the same app... OMG! you've unleashed more ideas... muahahahaha!

[erkindunya]

Thanks for the quick video but extremely useful, on your Github I seen a lot of good solutions that can be imported to any tenants, my question is how I easily export my SharePoint list of customised Power apps to new tenants as we are doing migration, many thanks April

[reetukukreti]

Hii, Is it possible to create custom many to many reusable component and can I use patch within component? Please provide me solution it would be a great help.

[FaustoCapellanJr]

This is awesome. I'll definitely use the Tab List control for all future navigation I create in Power Apps.

[volkerblees]

Brilliant! Would love to dig deeper into your theming. Looks fab 👍🏼

[s]

any chance the tablist to use icon instead of text?

[mikepowers]

I'm not seeing this in GCC or in my commercial Dev tenant.

[michaelbenny]

Awesome guide. Thank you!
This will make my apps feel more real

[bowwikatigbak]

I hope they add an extra function where you can Add a icon for each of the tab

[dougydoe]

I just went to the Sample Gallery and downloaded the Solution file but Its giving me an error message as I try to upload the solution into my environment. Is there something I need to do before that? It says the file is not a valid solution