The Tabs element allows you to organize content into multiple sections, each accessible by clicking on a tab. Users can switch between different content panels without leaving the page.
Overview
Tabs are ideal for organizing related content into switchable views.
Common Use Cases
Use Case | Description |
Product details | Specifications, reviews, shipping info |
Feature comparisons | Compare different options side by side |
Pricing tiers | Display different plan details |
FAQs | Organize questions by category |
Content sections | Break up long content into digestible parts |
Inserting the Tabs Element
Steps
Open the Insert panel in the left sidebar
Switch to the Elements tab
Navigate to Advanced Interactive
Drag the Tabs element onto your canvas
By default, the Tabs element displays two tabs.
Element Structure
The Tabs element is organized into two separate layer groups:
Layer Group | Contains | Purpose |
Tabs menu | Link layers | Contains all tab buttons |
Tabs content | Tab layers | Contains content for each tab |
Layer Hierarchy
Level | Layer |
Parent | Tabs |
Group 1 | Tabs menu |
Children | Link (Tabs 1), Link (Tabs 2), Link (Tabs 3) |
Group 2 | Tabs content |
Children | Tab (Tabs 1), Tab (Tabs 2), Tab (Tabs 3) |
Tab Linking
Each Link in the Tabs menu corresponds directly to a Tab in the Tabs content:
Tabs Menu | Tabs Content |
Link (Tabs 1) | Tab (Tabs 1) |
Link (Tabs 2) | Tab (Tabs 2) |
Link (Tabs 3) | Tab (Tabs 3) |
Tabs Menu
The Tabs menu group contains all the tab buttons (Link layers).
Editing Tab Buttons
Tab buttons can be directly edited. Select a Link layer to:
Change the label text
Adjust typography and colors
Modify spacing and padding
Adding Elements to Tab Buttons
You can insert additional elements inside each Link to create custom button designs:
Element | Example Use |
Icon | Add an icon next to the label |
Image | Use an image as part of the button |
Multiple text layers | Add subtitle or description |
Tab buttons can be fully styled to match your brand.
Tabs Content
The Tabs content group contains all the content panels (Tab layers).
Adding Content to Tabs
Within each Tab layer, you can insert any elements:
Text layers
Image layers
Video layers
Containers and layouts
Any other Instant elements
Each Tab displays its content when the corresponding Link is active.
Creating New Tab Items
There are three methods to add new tabs:
Method 1: Add New Tab Menu Item
Right-click on the Tabs menu group in the Layers panel
Select Add new tab menu item from the context menu
A new Link is inserted, and a corresponding Tab is automatically created
Method 2: Add New Tab Pane
Right-click on the Tabs content group in the Layers panel
Select Add new tab pane from the context menu
A new Tab pane is created
Method 3: Duplicate Existing Tab
Select an existing Link in the Tabs menu
Duplicate it
A new Link and corresponding Tab pane are automatically created
Reordering Tabs
You can reorder tabs in both layer groups:
Layer Group | How to Reorder |
Tabs menu | Drag Link layers to reorder the tab buttons |
Tabs content | Drag Tab layers to reorder the content panels |
Styling Tab States
Configure hover and active states for tab buttons.
Accessing State Styles
Select a Link layer in the Tabs menu
In the right sidebar, click the Interactions tab
Configure the available states
Available States
State | Description |
Default | Normal appearance when not active or hovered |
Hover | Appearance when mouse hovers over the tab |
Active | Appearance when the tab is selected |
Each state can be fully styled with different colors, borders, backgrounds, and more.
Responsive Design
Tabs can be made fully responsive and customized for each viewport, just like all other elements in Instant.
Quick Reference
Task | Action |
Insert Tabs | Insert panel → Elements → Advanced Interactive → Tabs |
Edit tab label | Select Link → Edit text directly |
Add icon to tab | Select Link → Insert icon element inside |
Add new tab (method 1) | Right-click Tabs menu → Add new tab menu item |
Add new tab (method 2) | Right-click Tabs content → Add new tab pane |
Add new tab (method 3) | Duplicate existing Link |
Reorder tabs | Drag layers in Tabs menu or Tabs content |
Style hover state | Select Link → Interactions → Hover |
Style active state | Select Link → Interactions → Active |
Add content | Select Tab → Insert elements inside |
Layer Structure Summary
Parent | Children | Layer Type |
Tabs | Tabs menu, Tabs content | Container |
Tabs menu | Link, Link, Link... | Group |
Tabs content | Tab, Tab, Tab... | Group |