Burger Menu for mobile view

How do I create a burger menu for mobile view?

To create a burger menu for mobile view, follow these steps:

Select Mobile View:

In the top right corner of your interface, select the mobile view option (indicated by a phone icon).

⁠

Activate Conditional State and Hide Menu Components:

Activate the conditional state feature.

⁠

Change the visibility of the blocks/components used for the menu to "hidden" when the screen size is set to "Phone".

⁠

Remove 'Screen is Phone' Condition:

Temporarily remove the "Screen is Phone" condition.

Add a Drawer Component:

From the Layout group, add a Drawer component to your project.

⁠

Change the Drawer’s visibility to "hidden".

Add Button and Menu Components to the Drawer:

Inside the Drawer, add a Button component with the icon you want to use for the burger menu.

⁠

Below the Button, add the components that will serve as the menu items inside the Drawer.

Reactivate 'Screen is Phone' Condition:

Reactivate the "Screen is Phone" condition.

Change the Drawer’s visibility to "visible".

⁠

By following these steps, you can effectively create a functional burger menu for mobile view that enhances user navigation.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.