Page tabs

Add a screen with tabs displaying different content

Toggle content inside a page without needing to replicate screens. Page tabs can be used either as an extra navigational hierarchy that complements the main bottom menu or you can also use it to navigate content with buttons inside a page.

👉 The Tags

This component requires the following tags:

• [container:tabs]: this tag creates a special container element, wrapping up both the tabs control and the content of the segmented tabs. It needs to be added in the 2nd level layer in the design file and its size shouldn't be bigger than the main screen.

• [container:tabs-controls]: a special container inside the [container:tabs] element. It will contain the tabs controller to switch between the different segmented tabs. It needs to be aded in the 3rd level layer in the design file.

• [container:tabs-content]: a special container inside the [container:tabs] element. It will be used for the content for the segmented tabs. It needs to be aded in the 3rd level layer in the design file.

🎨 Design setup

1. Create the tabs controller, using a stateful component to create the buttons and different states (default and active). Create a [container:tabs-controls] around the buttons.

2. Create a frame that takes the space for the segmented tabs content. Add the [container:tabs-content] tag in this element.

3. Surround all these elements with a [container:tabs] element, located in the second-level layer.

4. Finally, to create the content for the segmented tabs, create separate screens with the content you want to display, and create prototyping links from the buttons in the controller to these pages. You can bind API data to the pages as well.

Please note that the refresh:pull tag is currently not supported within a Tabs Container on Android devices.

💾 Example file

Duplicate this file below to see how to set it up!

Bravo Sample: Page Tabs | FigmaFigma