@WonderLaura

First Method: Simple Buttons

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.

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

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

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.

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

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.

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

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
OnSelect:  Set( 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!