Build a Power Apps Waffle Menu – 5 Ways

First Method: Simple Buttons

powerapps-waffle-menu-one-color

This starts at the 3:00 mark in the video at the bottom of this post.  These first two methods are mostly the same except for the color switching.

1.  In your app, from the Insert tab, insert a waffle menu icon on the screen, and move it to the top left corner.  Of course, you could use any kind of icon you like.  The hamburger menu is also commonly used.
powerapps-insert-waffle-icon

2. Select the waffle icon, and go to the OnSelect property.  This is the formula to use here:
UpdateContext( { ctxWaffle1open: !ctxWaffle1open } )

3.  Go to the screen’s OnVisible property.  Add this formula:
UpdateContext( { ctxWaffle1open: false} )

4.  From Insert tab, insert buttons for each “menu” item that you need to have, directly under the waffle icon.  Change the border radius to 0 (zero).

5.  In the OnSelect property of each button, use the Navigate() function to navigate to each screen in your app.

6.  Select all of the “menu” buttons that you added at step 2.  Go to the Visible property, and add this formula:
ctxWaffle1open

Second Method: Buttons and Color Reverse

powerapps-waffle-menu-reverse-color

This starts at the 18:52 mark in the video at the bottom of this post.

1.  Go through steps 1 through 6 above.

2.  Insert a rectangle shape, which you can find on the Insert tab, under the Icons drop-down.  Reorder the rectangle so that it is behind the waffle icon. Rename it: recWhiteBlank

2.  Go to the Fill property of the rectangle.  Use this formula:
If( ctxWaffle1open, White, Blue )
Note that in the example video, my app has a blue toolbar across the top of each screen, so I’m referencing that blue color of that rectangle.  So, instead of blue, your second color may be different than mine.

3.  Select the waffle icon, and go to the Color property.  Use this formula:
If( ctxWaffle1open, Blue, White )

4.  Select the menu buttons, and go to the Fill property.  Use this as the formula:
recWhiteBlank.Fill

Third Method: Container

powerapps-container-waffle-menu

This starts at the 23:00 mark in the video at the bottom of this post.

1.  Follow steps 1 through 3 in the very first method above.

2.  From the Insert menu on the left side of the screen, insert a vertical container.  Of course a horizontal container could be used if that’s the look you’re going for.
powerapps-insert-vertical-container

2.  Insert all of your needed buttons for navigation inside of the container.

3.  Just like in the other two methods, you’ll be going to the Visible property of the container, to add the variable:
ctxWaffle1open

4.  Click on each button that you’ve added to the container and go to the OnSelect property, to set it to Navigate() to other screens in your app.

5.  Check out my video at the bottom of this post, to see my demonstration of various settings that exist in containers, for wrapping and aligning the buttons, etc.

Fourth Method:  Gallery

powerapps-gallery-navigation-menu

This starts at the 26:36 mark in the video at the bottom of this post.

I like this method the best because it allows you to have one central place where you control what the menu items are, even when you’re displaying that menu on multiple screens in the app.

1.  Follow steps 1 through 3 in the first method above.

2.  Insert a gallery on the screen.  Blank vertical.  In the property panel on the right side of the screen, for the gallery property called Layout, pick the layout called Title.

3.  Go to the App’s OnStart property.  This is where you create a collection of navigation items.  Use your own menu verbiage in red (in quotes) and use your own screen names to navigate to (in purple).  You can have as many as you’d like.
powerapps-navigate-screens-gallery-collect

ClearCollect(
colGalleryMenu,
{
MenuTitle: “Menu Item 1”,
NavigateTo: scrButtons
},
{
MenuTitle: “Menu Item 2”,
NavigateTo: scrButtonsWhite
},
{
MenuTitle: “Menu Item 3”,
NavigateTo: scrContainerMenu
},
{
MenuTitle: “Menu Item 4”,
NavigateTo: scrGalleryMenu
},
{
MenuTitle: “Menu Item 5”,
NavigateTo: scrAnimated
},
{
MenuTitle: “Menu Item 6”,
NavigateTo: scrButtons
}
);

4.  Go back to the gallery that you inserted at step 2, and go to the Items property.  Enter this in the items property: ColGalleryMenu

5.  Go to the Visible property of the gallery.  Enter this: ctxWaffle1open

6.  Go to the OnSelect property of the gallery.  Use this formula: Navigate( ThisItem.NavigateTo )

7.  Usually this will be set by default, but make sure that the label that’s inside of the gallery has this in the Text property:  ThisItem.MenuTitle

Fifth Method: Animated

PowerApps animated menu

This starts at the 36:03 mark in the video at the bottom of this post.

1.  Follow step 1 in the very first method above.

2.  Select the waffle icon, and use this formula: Set( varStartTimer, true )

2.  Insert labels (or buttons) to represent each menu item that you need, and set the OnSelect of each one, to Navigate to the screen you’d like it to go to.

3.  Insert a timer control.  Ultimately this can be hidden by changing the Visible property to false, but you’ll need it on the screen in order for the animation to happen.  Name it tmrExample

4.  Set the following properties on the timer:
Repeat: true
Duration: 50
OnSelectSet( varStartTimer, true )
OnTimerEnd:

If(
varMenuState,
If(
varAnimation > 0,
Set(
varAnimation,
varAnimation – 25
),
Set(
varStartTimer,
false
);
Set(
varMenuState,
false
)
),
If(
varAnimation > 150,
Set(
varStartTimer,
false
);
Set(
varMenuState,
true
),
Set(
varAnimation,
varAnimation + 25
)
)
)

5.  Select all of the labels (menu items), and go to the width property.  Enter this: varAnimation

6.  Go to the OnHidden property of the screen, and add this formula:

Set( varMenuState, false );

Set
( varAnimation, 0)

Now when you click the waffle menu, the menu items will be animated and will expand from left to right.

That’s all!  Have fun trying out these methods, and watch my video below for the full one-hour demonstration of all five methods.  I even spent the last 15 minutes of the video, combining the gallery method with the animation method, just for fun!

waffle-menu-powerapps-screenshot-video

2 comments

  • Hi Laura,

    I love this and started using this in my apps at the end of the year. Something that may interest some, I used the gallery method but I also use it as a component. Why? Because if I need to change the design or anything I just need to update it in one place.

    Something that I haven’t worked out yet, is there a simple way to do sub menus (expand and collapse)?

    Cheers

    Like

    • Yes, there is, but that’s a much different solution. If you’re an Ultimate student on my site at iwmentor.com, you can find the downloadable app for that in our Power Apps Knowledgebase.

      Like

Leave a reply or question

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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