Power Apps Navigation Menu Component (2 level menu)

In this video on Power Apps 2 level Navigation Menu Component, we will go through a step-by-step walkthrough of building a responsive PowerApps Navigation Menu Component / Left Navigation component / Menu Bar Component.

PowerApps Menu navigation component can be reused across multiple screens or Apps.

Canvas components make it easier to build reusable controls, such as navigation menus and dialogs.
The ‘master’ / ‘instance’ behavior makes it easy to reuse them as building blocks inside the app or shared between apps.
By creating a component library, app makers easily share and update one or more components with other makers.

Component Features:
✅ Dynamic 2 level navigation
✅ Change configuration using input properties
✅ Show hide Power Apps Hamburger Menu Component

Table of Contents:
00:00 - Intro
00:32 - Creating a Component Library
01:35 - Create a Navigation Menu Component
03:26 - Create input property for component for Menu Items
05:16 - Configure UI for the Menu component
09:18 - Show or hide Navigation menu on click of Hamburger Icon
10:51 - Create more input properties to configure the Menu colors
13:44 - Test Menu component within the Component Library
15:23 - Set Menu component width dynamically and show hide Menu from screen
23:08 - Add 2 level navigation (multi level) for Menu component
26:53 - Test multi-level navigation menu from Component Library
28:46 - Save and Publish Component Library
29:28 - Add and configure Left Navigation Menu to App with Tablet form factor
32:49 - Add and configure Left Navigation Menu to App with Phone form factor
34:00 - Subscribe to Reza Dorrani channel

#PowerApps #Components #PowerAppsMenu

[diegomartinez]

I just want to thank you. I designed the menu and I think its impossible to have a better tutorial. Just Thanks

[preetimahawar]

Thank you Reza. I do not know what would I have done without you. I can not understand any other person's video. The way you explain things is beyond amazing.

[glenwolinsky]

Excellent tutorial. You move very quickly which works perfectly in this format. Was able to stop the video and work along side your examples and your contect was spot on! Keep up the good work and thank you!!

[TISSOTJeanMichel]

Merci pour tout. Les explications sont claires et très utiles. Je customise mes applis grave à vos tutos.

[yehunlavolontededieu]

It's Reza, Before watching the video first like and subscribe

[oluwadolapobifarin]

How do you respond to all these comments? Wow.

Anyways this is my third time watching this video in a space of 3months. A very good piece. Thank you.

[rwbvalaissasitbim]

Hello. Thank you for all your videos.
I'm a beginner at Power Apps and honestly by following your videos, I have already been able to set up two applications in two weeks that work perfectly. This is thanks to your explanations.
Thanks again, everything is great. 👍

[aaron]

Simply incredible work!!! Thank YOU!! so much detail and helpful real world examples!!!

[aescamilla]

Hi Reza, thank you for this incredibly detailed tutorial, I learned so much just by following the step by step tutorial.
I modified the component by adding a MenuState output property that points to showMenu variable and in the component height property I'm using If(MenuLeftNav.MenuState, App.ActiveScreen.Height, 50), that way when the menu is not pressed the Hamburger menu just minimizes to the icon size. I had to do this because even with the slim width when component is not active it was interfering with my app layout.
Again, thank you for the awesome videos, big fan of your projects and teaching skills! 👍🏼

[gznqtl]

This is very very very usefull video, thanks a lot!

[necdetsaritas]

as I am waiting. Great job. Thanks, Reza

[solarson_studio]

so much content! it is super helpful! thanks sir!!!

[habtamuAwoke]

Thank You Very Much Dear,
I have used it

[alpin]

Hello, thanks for this excellent video.
In the table menu I want one of the options to be a link to an internet site and not to another screen of the application, how can I do that?

[VictoriaLynn-ft]

I built this and it works well with a mouse. Any suggestions on how to get the tab index set? I want to ensure that the Accessibility is correct for everyone.

[DvdM-hsbu]

Thnx for you example. I have a question: I have doing all the steps of you explanation and it will works in the online envoirment, but when I publice the app, I didn't see the information of the navigationscreen in the app. I will see the Hamburger Icon and when I click on it, there will come the navigation screen. How can I solve this problem?

[enne]

This was an amazing tutorial, is there anyway to hide the submenu until the specific menu button is pressed. For example, If you click on the Form Menu Item it then would display the submenu under it to allow for selected the sub items. and then it would hide if Form was clicked again or another selection was selected?

[TYS]

Great video. Please Raza, I want the app to hide the menu items based on the user's permission. Is this possible with component? Thank you

[bronwenappleby]

Thanks for the video, super useful! I tried to build this in my app, however I would constantly get a loading spinner for the nested gallery - is there anyway to remove / prevent this?

[ernestomartinez]

Excellent video, it helped a lot. The only issue I encountered was that if there are more than one menu item with submenus, when you click on the menu item it expands all the submenus. I haven't been able to figure out how to just expand one submenu at the time, and then close all other when one submenu is expanded. Sorry, but I'm pretty new with PowerApps. Thanks.