# Top bar

{% embed url="<https://www.youtube.com/watch?v=-Ijh3AiiAm0>" %}

## :point\_right: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.

<mark style="color:red;">`[container:top-bar]`</mark>

2. **Show Top Bar:** This will show when you scroll.

<mark style="color:red;">`[container:top-bar:showscroll]`</mark>

3. **Hide Top Bar:** This will hide when you scroll.&#x20;

<mark style="color:red;">`[container:top-bar:hidescroll]`</mark>

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

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

{% hint style="info" %}
Make sure all the side of the container touches the edges of the app page or other containers.
{% endhint %}

&#x20;   2\. **Copy & paste** the tag into the layer name of this **container**

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FbBWacYLv4Y5wY4THGLG4%2FScreen-Recording-2024-01-17-at-12.26.34.gif?alt=media\&token=d01df8d3-c87d-4204-bcc9-b534ac3ef6cb)

&#x20;   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 <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/981972505586768390>" %}