🏷️

Menu: Modal Menu

What does it do?

Triggers a menu that slides in from the bottom and covers the entire screen.

image

The Tag

[menu:modal]

Which layer can I put it on?

A top-level app page

How do I set it up in the design tool?

  1. On a blank app page, create a menu design that covers the whole screen.
  2. image
  3. Create a 2nd-level container around the menu design.
  4. image
  5. Copy & paste the tag into the layer name of the top-level app page.
  6. image
  7. [Bonus Tag] If you have a close element in your menu design, you can add the tag [action:close] to close the menu.
  8. image
  9. Link each menu item to the app page you want it to open.
  10. image
  11. Link the menu icon on any app page to the menu.
  12. 💡

    Make sure the Starting app page is on your "home" app page, not the menu screen

    image
  13. Import to Bravo & preview on Bravo Vision 🚀

Figma Example

Open & duplicate the Figma file below to see how it's set up.