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.

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

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

15 Comments
  1. Sundra Pillay 2 months ago

    Thanks Reza

  2. N S 2 months ago

    as I am waiting. Great job. Thanks,Reza

  3. future06 2 months ago

    Thank you very much, Awesome job!

  4. Carlos Velazquez 2 months ago

    Hi Reza, how can I put custom images in the menu?

  5. Chad Kealey 2 months ago

    Thank you for this! I've been trying to build something similar in a few apps and now have a roadmap to follow. One question, though: to ensure the menu is collapsed after changing screens, do you really need to set the "ShowMenu" variable to true, then to false? I realize it should be so quick that nobody will notice, but some people might. Also, would it be possible to make that a context variable (rather than global) and pass it along in the navigate formula?

  6. Alex Shteinberg 2 months ago

    Very nice, the component feature is now truelly coming into its own.

  7. Ziad Hamandi 2 months ago

    Very nice Reza, excellent job with this menu. Can we connect privately? I am in need of expert on a project.

  8. Goran Trifunovic 2 months ago

    Thanks Reza, really helpful video.

  9. Emilio Roqueta 2 months ago

    I download the component from Github and when I try to import in my power app, I get this error: "

    There was a problem importing Menu Component. We were unable to open this app.
    " , the app has enable components.

  10. Akbar Mahfuz alam 2 months ago

    As usual wonderfully explained and great work

  11. hemanth kumar g 2 months ago

    Is it possible to add Refresh and UpdateContext functionality to icons onselect inside the components

  12. Vincent Fernandez 2 months ago

    The menu width trick is very nice. Good Job !

  13. Mike Tosto 2 months ago

    Awesome video! Appreciate the detail. I am attempting to make a variation of this where a simple menu sits at the bottom of the app and a pop up menu would appear from the bottom when a button is clicked with more menu options . So pretty much a reverse "L" shaped menu. The problem is when I have the size of the component dynamically change based on clicking the button, it shrinks the component from the top portion and not the bottom, making my gallery menu appear off screen. There doesn't seem any way to adjust the position of the component. Is there a work around for this?

  14. Ger Fer 2 months ago

    ✌️

  15. Rick Hurt 2 months ago

    Awesome job on this tutorial, very helpful and straight-forward build. Thank you.

Leave a reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

©2021 TDG - We Are Back Baby!

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending
or

Log in with your credentials

or    

Forgot your details?

or

Create Account