🏷️

Menu: Tabs Menu

What does it do?

Places a fixed bottom navigation bar on every screen of the app.

image

Bravo currently doesn't have the possibility to set the active state. We have been working on that and plan to release it soon!

The Tag

[menu:tabs]

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 tabs menu design (it can be any height).
  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. Link each menu item to the app page you want it to open.
  8. 💡

    Make sure there are at least 2 menu items linked. If you only have one menu item linked, the tabs menu will not show.

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

Figma Example

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