Tabs
Add groups of content that visitors switch between with buttons, and manage tabs from Layers.
Use Tabs to show different content in the same space, such as Monthly and Annual plans, or Features and Reviews. A row of tab buttons switches between tabs.
Add it
- Drag Tabs from Interactive onto the phone.
- Or hover a layer in Layers, click +, then Interactive, then Tabs.
You get two tabs, Tab 1 and Tab 2, each with a text reading "Tab 1 content goes here". Above the content is a dark pill with a button per tab. The active button is indigo with white text.
Where it can go
In stacks, the header, the footer, other tab content and carousel pages. Tabs are interactive: they cannot sit inside a button, plan, answer or tab button. See Where components can go.
Manage tabs in Layers
Add, rename and delete tabs from the row under Tabs in Layers: Tab shown in Layers, Add tab, Add to this tab and Tab actions. See Layers. Only the active tab exists on screen, so only its content can be selected.
Design panel
| Section | Control | What it does | Default |
|---|---|---|---|
| Active Tab | Menu | The tab shown on the canvas and first to visitors. | First tab |
| Size | Width, Height | Fill, Fit content, Fixed, Relative | Fill, Fit content |
| Spacing | Padding, Margin | Around the tab content | 0 |
| Appearance | Shape | Rectangle, Circle, Pill | Off |
| Fill | Color or image | Behind the content | Off |
| Border, Drop Shadow | Stack controls | Off |
Select the row Tab Control in Layers to style the pill that holds the buttons. Select a tab button on the canvas to style it: its panel is a Stack panel with Default and When selected tabs, where When selected is the active tab. The default selected button has an indigo fill. The tab content itself is a normal stack you edit by selecting it or its children.
States
Tab buttons have Default and When selected looks. Clicking a button on the canvas makes that tab the saved Active Tab, and marks the screen unsaved.
Dark mode and screen sizes
Default colors are light only. Add dark colors to the pill, the buttons and their labels.
Tips and common mistakes
- Deleting is disabled for the last tab.
- Each tab's content is separate. A shared element must be added to every tab.
- For a two-state toggle, use Switch.
In the JSON
The component type is tabs, with control of type buttons, a tabs list, and default_tab_id. Each button is a tab_control_button linked by tab_id.