The Tabs element organizes multiple content panes within a single space – ideal for single-page layouts or areas with limited room.

Tab Structure

Tabs consist of three parts:

• Tab Menu – The Tab Menu lets users navigate between each pane. 

• Tab Content – Tab Content holds all the Tab Panes.

• Tab Panes – Finally, Tab Panes is where elements get added within a wrapper div called Holder.

Add Tabs

From Interactive Elements

1. Open the Insert panel from the Left Sidebar.

2. Navigate to Elements → Interactive.

3. Drag the Tabs premade block onto your page. You’ll find it in both light and dark variants.

From Base Elements

1. Open the Insert panel from the Left Sidebar.

2. Navigate to Base Elements. 

3. Drag the Tabs element onto your page.

Managing Tab Items

Add a Tab Item

1. Select the Tabs element on the canvas.

2. Go to the Design tab in the Right Panel.

3. Under the Tabs section, click Add Item.

Remove a Tab Item

4. Select the Tabs element on the canvas.

5. Go to the Design tab in the Right Panel.

6. Under the Tabs section, click the Minus (–) icon next to the Tab Item you want to remove,

Rename a Tab Item

1. Select the Tabs element on the canvas.

2. Go to the Design tab in the Right Panel.

3. Under the Tabs section, double-click on the Tab Item you want to rename.

4. Type the new name and click Save.

Reorder Tab Item

1. Select the Tabs element on the canvas.

2. Go to the Design tab in the Right Panel.

3. Under the Tabs section, use the toggle next to any Tab Item to drag it to your desired position.

Add Content to a Tab

1. Select the Tabs element on the canvas, then go to the Design tab in the Right Panel.

2. Under the Tabs section, select the Tab Item you want to add content to.

3. Open the Insert panel and drag any element to Tab Pane → Holder on the canvas.

4. Repeat for each Tab.

Set Tab Transition Animation

1. Select the Tabs element on the canvas.

2. Go to the Design tab in the Right Panel.

3. Under the Tabs section, click the Lightning icon to access the Tab Animation panel:
   • Animation – Choose the entry transition style for tab content.
   • Easing – Controls the acceleration of the animation. Options include Linear, Ease, Ease-in, Ease-out, and Ease-in-out.
   • Duration – Sets how long the transition takes, in milliseconds.