Skip to main content
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Gallery / Power Apps - Canvas Apps Components Samples / #PPOC2020 - Hamburger Menu ...

#PPOC2020 - Hamburger Menu Component

3404 Views
Carsten_Growth Profile Picture Posted by Carsten_Growth

Today is the day of Microsoft Power Platform Online Conference 2020 (#PPOC2020). As a community we love to meet at in-person events, but in times like these it is pretty important to have the opportunity to learn and get together online as well.
Nevertheless on recent hackathons I was asked about some of my "ninja black-belt" skills which allows me to come up with apps quite fast and all of them having a clean and nice UI look & feel (to be discussed), I wanted to contribute to this initiative and share with you today the component:

 

  • Hamburger Menu Component
    • Main configuration via two tables - HamburgerMenuItems and HamburgerSubMenuItem - for samples see the component and keep the structure
    • Output properties:
      • IsExpanded (boolean) - to allow full control of visibility from your app
      • SelectedHamburgerMenuItemID (number) - the number (ID) of the item the user clicked on
      • SelectedHamburgerSubmenuItem (number) - the number (SubID) of the item the user clicked on
    • using nested galleries to allow you to build a hamburger menu for your canvas applications

Use the component as is. Build your apps faster in challenging times like these and never stop learning and sharing.
You can reach and follow me on Twitter @ carsten_growth where I am sharing stuff from my day to day business

HamburgerMenu_Com...
HamburgerMenuComp...

Categories:

Comments

  • RobotRising Profile Picture RobotRising 402
    Posted at
    #PPOC2020 - Hamburger Menu Component

    I haven't been able to get it to work with screen navigation but you could use forms/galleries on 1 screen and set the visible based on the hamburger selection i.e. If(HamburgerMenu_2.SelectedHamburgerMenuItemID = 1,true,false) would make it so that something like a gallery is visible if home is selected otherwise visible would be false. So for the App selection set that ID in the visible for the item you want to show. 

  • NaviL Profile Picture NaviL
    Posted at
    #PPOC2020 - Hamburger Menu Component

    Hello, 

    Don't know why the sub menu cannot display.

    NaviL_0-1635411459969.png

     

  • ihassig Profile Picture ihassig
    Posted at
    #PPOC2020 - Hamburger Menu Component

    Hello @Carsten_Growth , 

    Thank you very much for sharing this component it is very helpful for everyone. I want to ask you a question: How does navigation between screens work? I see that in the definition of the menu tables and submenus they are not defined, and in the context variables, I have not managed to do it. Do you have any suggestions? Thank you very much for your time and help.

     

    Ivan Hassig

     

  • Carsten_Growth Profile Picture Carsten_Growth
    Posted at
    #PPOC2020 - Hamburger Menu Component

    This menu sample is using svg icon concept. The svg for an icon can be easily catched by using another gallery sample available here.

    If you want to use the build-in icons instead, you would need to modify the component such as Img_HamMenuItem inside the gallery would need to have a modification on Image property.

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted at
    #PPOC2020 - Hamburger Menu Component

    Hello,

     

    Can you explain for me how you used the icons in the menu and how to change it with internal once???

     

    Thanks.