# Modal Menu

## 👉 **The Tag** <a href="#the-tag" id="the-tag"></a>

This tag, placed on a top-level app page, creates a menu that slides in from the bottom and covers the entire screen.

**📍 Where to add the tag:** A top-level app page

```
[menu:modal]
```

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FGaYUTCQjxpJeq6FJCNfq%2FScreen-Recording-2024-06-12-at-15.29.39.gif?alt=media\&token=9c27af3f-9e51-4706-9398-53bc25cfec06)

## 🏷️  **How to add the tag** <a href="#how-to-add-the-tag" id="how-to-add-the-tag"></a>

1. On a blank app page, create a menu design that covers the whole screen.

&#x20;   2\. Create a 2nd-level container around the menu design.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FhgHSlII9bgO6gcntZbKB%2FModal%20menu%20\(1\).jpg?alt=media\&token=0d2610fe-6909-4a5f-a057-4f9ff4fb13c4)

&#x20;   4\. \[Bonus Tag] If you have a close element in your menu design, you can add the tag \[action:close] to close the menu.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FZVO8FbaL3ANbcDnJNK7D%2FModal%20menu.jpg?alt=media\&token=229abf92-6c64-4c0c-81a5-6382f629462e)

&#x20;   5\. Link each menu item to the app page you want it to open.

&#x20;   6\. Link the menu icon on any app page to the menu.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FkLDOPusaNlKDXuD2G4MP%2FModal%20menu%20\(2\).jpg?alt=media\&token=d796021b-e452-4cb5-843d-08ef9da01c05)

{% hint style="info" %}
Make sure the Starting app page is on your "home" app page, not the menu screen
{% endhint %}

&#x20;   7\. Import to Bravo & preview on Bravo Vision 🚀

## 💾 Example files <a href="#example-files" id="example-files"></a>

Duplicate the files below to see how to set it up!

{% embed url="<https://www.figma.com/community/file/1382718711989757462>" %}