Top bar

The top bar container fixes its position to the top of the screen and does not scroll with the rest of the screen.

👉The tags

The top bar container fixes its position to the top of the screen and does not scroll with the rest of the screen. There are 3 different types of top bars:

1. Fixed Top Bar: This will be always visible.

[container:top-bar]

1. Show Top Bar: This will show when you scroll.

[container:top-bar:showscroll]

1. Hide Top Bar: This will hide when you scroll.

[container:top-bar:hidescroll]

🏷️ How to add the tag

1. Create a container around the section of the app page that you want to stay fixed.

Make sure all the side of the container touches the edges of the app page or other containers.

2. Copy & paste the tag into the layer name of this container

3. Import to Bravo Studio & preview on Bravo Vision 🚀 (If you imported the app before, you just need to press the button Update in Bravo Studio to see the changes)

💾 Example files

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

Bravo Sample: Top BarsFigma