The tabs element in Instant allows you to organize content into multiple sections, each accessible by clicking on a tab in a menu. This guide covers inserting tabs, understanding their structure, styling options, and managing content.
Adding a Tabs Element to the Canvas
Step 1: Open the Insert Panel
Navigate to the Insert panel in the left sidebar.
Step 2: Find the Tabs Element
Hover over the Interactive header. Locate the Tabs element in the options.
Step 3: Drag to Canvas
Drag the tabs element into your base row. A pre-made tabs component with multiple items will be inserted.
Tabs Structure
The tabs element is constructed from two main sections. Understanding this structure is essential for customization.
Layer Hierarchy
Tabs (parent container)
Menu (top section)
Tab Item (trigger)
Tab Item (trigger)
Content (bottom section)
Content Item
Content Item
Layer Descriptions
Layer | Description |
Tabs | The parent container holding menu and content |
Menu | The tab bar containing clickable tab items (triggers) |
Content | The area displaying content for the selected tab |
Tab Item | Individual clickable tab in the menu |
Content Item | The content displayed when its corresponding tab is selected |
Styling the Menu
The menu contains the tab items and their triggers. Each tab item can be fully customized.
Default Interactions
Tab items come with two built-in interactions:
Interaction | Default Behavior |
Active | Selected tab shows a black 1px bottom border |
Hover | Non-active tabs show a black 1px bottom border at 30% opacity when hovered |
Customizable Properties
You can customize the following for each tab item:
Text content
Font and typography
Colors
Border styles
Recommended Styling
For a polished look, create clear visual distinction between states:
Set inactive tab text to a lighter gray
Keep active tab text black
This provides clear feedback when users navigate between tabs
Managing Content Items
Each content section corresponds to a tab in the menu. The order of content items matches the order of tab items.
Adding New Content Items
To add a new tab with content:
Select an existing content item in the Layers panel
Right-click and select Duplicate
A new content item and corresponding tab item will be created
Renaming Tab Items
To change the text label of a tab:
Select the tab item in the menu
Navigate to the right sidebar
Edit the name in the settings
Example: Rename "Item 1" to "Product Details"
Building Tab Content
Each tab's content area can be fully customized with any elements you need.
Example: Creating a Quote Layout
Delete the default text element inside the content item
Insert a two-column layout
Left column: Add two text elements (e.g., a quote and attribution)
Right column: Add an image
Remove the default fixed width (600px) from the Tabs element so it expands to 100% width
Clean up styling:
Remove unnecessary fill colors from content and rows
Set background colors on the base row instead if needed
Content Flexibility
Content items can contain any combination of elements:
Text and headings
Images and videos
Row and column containers
Buttons and links
Any other Instant elements
Duplicating for Multiple Tabs
Once your first tab content is complete:
Duplicate the entire content item as many times as needed
Update each duplicate with its own unique content
Rename each tab in the menu to match its content
Example tab names: "Overview," "Specifications," "Reviews"
Quick Reference
Task | Location |
Insert tabs | Insert panel → Interactive → Tabs |
Add new tab | Duplicate existing content item in Layers panel |
Rename tab | Select tab item → Right sidebar → Edit name |
Style active state | Select tab item → Interactions → Active |
Style hover state | Select tab item → Interactions → Hover |
Remove fixed width | Select Tabs element → Size → Remove 600px width |
Reorder tabs | Drag tab items in the Layers panel |
Structure Requirements
Requirement | Details |
Menu/Content pairing | Each tab item must have a corresponding content item |
Content flexibility | Any elements can be placed inside content items |
Interactions | Active and Hover states available for styling |