Need help? We've got your back.

You can use the Tab element to create interactive and organized content by displaying information in tabs. Displaying different contents in dedicated tabs helps users to navigate and scan everything easily. 

In this article, you’ll learn all about the Tab element and the settings related to it.

Let’s drag and drop the Tab element onto a page inside the builder 2.0. To do that, first open the Elements menu from the left sidebar and then click the Tab option.

Now, drag and drop any Tab design. You can use one with an empty tab panel or start with a fully designed pricing/membership card. For the purpose of this tutorial, we’re using the empty tab.

Note that the element is divided into two different parts: Tab/Tab Header and Tab Panel/Body.

You can put other elements like box, text, heading, etc. inside the tab panel/body to design each tab. Notice that when you switch between tabs, the content of the tab panel changes accordingly. As for settings, you can set the background color for the tab panel. And of course, use the Styles and Advanced options on the editing panel to customize borders, give radius and shadows, add animations, etc.

The Tab Header part is where you have a lot of tab setting options. Right-click on the tabs box to open the editing panel on the right side. Let’s go over all the settings.

Tab Items

From here, you can edit any of the tab label and add new tabs if needed or even delete existing ones. 

You can also duplicate a tab. This will quickly create a copy of the tab including the design and content of the tab panel.

Tab Header Style

You can align the tab items with respect to the tab header box: Left, Center, or to the Right. In addition, there’s also an option to adjust the gap in-between the tab items.

Four other settings under Tab Header Style are: 

1. Margin & Padding: Expand this option to adjust the margin and padding for the tab header section.

2. Border Radius: This lets you round the corners of your tab header. You can apply rounding to all corners or just specific ones.

3. Border: Set a border line either on specific side(s) or on all sides using the border width property. Also, you can choose the border style type and border color. 

4. Color Options: The background color and the tab items’ text color are customizable from this setting.

Tab Menu Item Style 

The options under this setting are for the tab menu items. The four options available for the header section are also available for the menu items. That means, you can also customize the background and text color, give borders and round corners, and add paddings to each of the tab menu items. 

Apart from those, you have two more options: 

1. Menu Typography Style: Here, you can choose the font-type and the font-size of the items. 

Customize the text color, set letter spacing, and adjust the line-height of the menu items. 

Besides, there are options to transform the item text and choose any decoration type. 

2. Active Menu Style: Design and set styles for how the active tab i.e. the tab users select should look like. This option lets you set the background color of the active tab, its text color, and border color if you’ve set any border.

Tab Settings

This is where you can choose the default active tab. In other words, the tab selected here will be selected for users by default when they land on the page. 

Background 

Finally, you have the luxury of changing the background color of the tab header section. 

The tab element ensures you can show certain content in a way that’s easier for users to scan and even interact with your page. Use it to organize and show the respective content in dedicated tabs.