{Step by Step} Create a waffle sliding menu panel in the Canvas app

In this blog, we will learn how to create a waffle sliding menu in Canvas app.


Creating a waffle navigation menu for easy accessibility of features and navigating other screens.


  • Sign into Power apps.
  • Create a Canvas app.
  • Go to insert and add a timer.
  • Select the timer and go to “Advanced” in the properties pane, On start switch “false” to “VarTimer”.
  • Change the duration of the timer from “6000” to “150”.
  • Add a “Waffle menu” icon.
  • And “OnSelect” of icon properties. UpdateContext({VarTimer:false});UpdateContext({VarWaffle:!VarWaffle,VarTimer:true})
  • This will start and stop the timer with the waffle menu.
  • Let’s create a flyout panel.
  • Add a rectangle and place it on the waffle menu.
  • On the “X” properties of waffle menu=If(VarWaffle,-115,-115+115*(WaffleTimer.Value/WaffleTimer.Duration))
  • Here we can see that the panel is on the left side of the screen.
  • Add one more waffle and on the “OnSelect”= UpdateContext({VarTimer:false});UpdateContext({VarWaffle:!VarWaffle,VarTimer:true})
  • And on the “X” property of the waffle menu paste the same value of the flyout rectangle’s “x” value.
  • Add buttons or icons in the flyout rectangle with the same “X” value as the flyout rectangle.
    • If(VarWaffle,-115,-115+115*(WaffleTimer.Value/WaffleTimer.Duration))
  • Save and publish.


Hope it helps! 

Power 365ing as usual! 

Any requirements, implementation or consulting work in Power Platform or Dynamics 365 – end user, Microsoft partner or an individual? 

Problem Area – Technical, Functional, Training, Development or consulting? 

Me and my team are here to assist, please fill the following form for your business needs: Click here