Use the Tabs element to add responsive, tabbed content to your Webflow project.
In this lesson:
To add the tabs element, go to the Add panel and scroll down to the components section. Then click and drag the Tabs element to place it on the canvas. It will automatically fill the width of whatever element it is placed in.
The Tabs element is made up of the Tabs Wrapper, which has inside it the Tabs Menu the Tabs Content.
The tabs menu contains all the tab links. By default, there are three tab links. Within each tab link is a Text block.
Nested inside the tabs content are the tab panes, where the content for each tab is kept. By default there’s three panes (matching the number buttons).
By default there are three tabs. You can add more with the following steps:
When you create a new tab, a tab link and a tab pane are automatically created in the correct locations.
If you delete a Tab Link, the corresponding tab pane will also be deleted, and visa versa.
In the tab settings, you can also rename the tabs for internal organization (this will not rename the tabs on the canvas).
There are several ways you can switch to different tabs:
After switching to a tab you can add elements to the tab pane in a couple ways:
You can also preview the content of each tab by going to Preview mode and clicking through each tab button.
You are able to style every element within the tabs component.
You can style the tabs menu by first selecting it on the canvas or from the Navigator and then going to the Style panel. For example, you can choose to add bottom margin to create space between the tabs and the content within the tab panes.
First, select a tab link, and create a new class. Then add this class name to all of the other tab links so they share the same styles. This green Current class is automatically applied whenever a tab is selected on your site.
Once all Tab Links have the same class name, select one of the tab links without the Current class. You can style one of these Tab Links and the changes will be applied to all of them. For example, you can edit the font color, font size, and background color.
You can choose to style the current tab differently than the normal tab to differentiate between active and inactive tabs. For example, you can edit the font color and background color to be different than a normal tab. To style the current tab, simply select the active tab link.
You can add a hover effect to the tab links with the following steps:
To control the transition between different tab panes:
Something went wrong while submitting the form. Please contact email@example.com