Navigation Menu Component for Power Apps 05-19-2022 09:20 AM - last edited 05-19-2022 12:13 PM

[RezaDorrani]

Hello everyone,

This video is a step-by-step walkthrough of building a responsive PowerApps Navigation Menu Component / Left Navigation component / Menu Bar Component. We will build a 2 level Navigation Menu.

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.

Download component: https://github.com/rdorrani/PowerApps/tree/master/Components/LefNavV2

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

#PowerApps #Components #PowerAppsMenu

Thanks,
Reza Dorrani, MVP
YouTube
Twitter

watch?v=3S0h2nODcxM

[biterbit]

@RezaDorrani : I followed this excellent video and have the component working. The only part of the design I did not follow was why, on each screen's OnVisible, you had to set the varShowMenu variable twice. It would be nice to understand the logic flow between the OnVisible function to the varShowMenu variable, to the ExpandMenu property on the component, to the component's OnReset function to the showMenu variable within the component. Does communication between the parent app and a component have to be so complex?

[ArpanBala]

How could I use custom images as a icon in the navigation  menu? I don't want to use the icons which are already in the app.

[Anonymous]

I am facing the same Problem. How can we add Custom Icons? When I put an Image from my library after the MenuIcon Command in the MenuItems Property I am just getting a blank field. 

[ArpanBala]

You can not use custom images as icon in powerapps.

Somehow I managed to use custom images as icon.

I made a component which will be on the left on the screen I managed to give some space for a image. Then I place image in the app.

This is the component where you can see I gave some space on the left.

On the screen I placed images. And they are working fine. If you have a responsive navigation menu then it wont work there.

[tori891214]

@RezaDorrani Thank you very much for your excellent tutorial! It helped me a lot. The component worked very well till yesterday. However I got several errors since today suddenly and the Hamburger Icon is no longer shown. I'm not sure whether itcame from one of the Microsoft updates. Could you pls have a look? Thanks! 

P. S.: I use the German version, the characters are different.

[ecubilla17]

I also have the same problem!!

[tori891214]

Right? It's really weird, 'cause the problem is gone for about five minutes after I tried to add or delete the ";" in some formula and then immediately removed the changes. But when I refreshed the page, same errors showed again.

[Pool]

I also have the same problem! Help

[Anonymous]

Thank you so much for this! It works brilliantly.

The menu kept on flashing up when I was using other buttons to navigate the pages due to the varShowMenu variable. 

I fixed this (I think) by putting the Set(showMenu, !showMenu) command on the OnSelect of the clicking button which also means I don't need to add the variable to every screen.

I also did the same trick you did for the width for the height so that it vanishes completely when not clicked because I need the whole screen for my app.