web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :

Navigation Menu Component for Power Apps

RezaDorrani Profile Picture Posted by RezaDorrani 12,143

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

Categories:

General PowerApps

Comments

  • martatracik Profile Picture martatracik 297
    Posted at
    Navigation Menu Component for Power Apps

    great tutorial, thank you for it, i am wondering if i can add Exit (Cancel) function to this Navigation Menu? Cancel should respond to the following function:

    martatracik_0-1677168945480.pngmartatracik_1-1677168987829.png

     

     

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted at
    Navigation Menu Component for Power Apps

    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.

  • Pool Profile Picture Pool
    Posted at
    Navigation Menu Component for Power Apps

    I also have the same problem! Help

  • tori891214 Profile Picture tori891214
    Posted at
    Navigation Menu Component for Power Apps

    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.

  • ecubilla17 Profile Picture ecubilla17
    Posted at
    Navigation Menu Component for Power Apps

    I also have the same problem!!

  • tori891214 Profile Picture tori891214
    Posted at
    Navigation Menu Component for Power Apps

    @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.

    tori891214_0-1652977148734.png

     

  • ArpanBala Profile Picture ArpanBala 24
    Posted at
    Navigation Menu Component for Power Apps

    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.

    ArpanBala_0-1644842503608.png

    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.

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted at
    Navigation Menu Component for Power Apps

    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 Profile Picture ArpanBala 24
    Posted at
    Navigation Menu Component for Power Apps

    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.

  • biterbit Profile Picture biterbit 408
    Posted at
    Navigation Menu Component for Power Apps

    @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?