🏷️

Container: Top bar

What does it do?

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

image

The Tag

[container:top-bar]

Which layer can I put it on?

A second-level container

How do I set it up in the design tool?

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

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

    image

  3. Copy & paste the tag into the layer name of this container
  4. image

  5. 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)

💾 Resources

👉 Sample Figma file

👉 Sample Adobe XD file