Tabs

Use the Tabs element to add responsive, tabbed content to your Webflow project.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

In this lesson:

  1. Add tabs
  2. Add content to the tabs
  3. Style tabs

Add tabs

Tabs icon thumbnail

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 eleven elements that are included in the components section are background

Anatomy of tabs

The Tabs element is made up of the Tabs Wrapper, which has inside it the Tabs Menu the Tabs Content.

The Tabs content is highlighted within the Navigator panel. The tabs menu displays the tab links and panels.

Tabs menu

The tabs menu contains all the tab links. By default, there are three tab links. Within each tab link is a Text block.

Tabs content

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).

Creating a tab

By default there are three tabs. You can add more with the following steps:

  1. Select any element within the Tabs
  2. Go to the Element Settings panel
  3. Under Tabs settings click the plus icon

When you create a new tab, a tab link and a tab pane are automatically created in the correct locations.

Deleting tabs

  1. Select any element within the Tabs
  2. Go to the Element Settings Panel
  3. Find the Tabs Settings section
  4. Click the trash icon next to the tab you want to delete  

If you delete a Tab Link, the corresponding tab pane will also be deleted, and visa versa.

Renaming tabs

In the tab settings, you can also rename the tabs for internal organization (this will not rename the tabs on the canvas).  

Switching tabs

There are several ways you can switch to different tabs:

  • Select the tab from the Set Active Tab list. Be aware: this will also set the default tab when the website is loaded
  • Select the tab you want to view in the Navigator
  • Select a tab Pane on the canvas and use the left and right arrows on the keyboard to select adjacent tab panes
The Tabs settings panel displays four options to set as the active tab along with a plug icon to add another tab. The panel also displays an easing drop down menu and text input fields for both Fade in and Fade out.

Add content to a tab

After switching to a tab you can add elements to the tab pane in a couple ways:

  • With the tab pane selected, click on elements in the Add panel to instantly insert them
  • Drag and drop elements from the Add panel into the tab pane
Step one on the left, select the tab pane you want to add an element into. Step two on the right, select the elements tab from the Add panel and add the element you choose.

 

You can also preview the content of each tab by going to Preview mode and clicking through each tab button. 

Style tabs

You are able to style every element within the tabs component.

Tabs menu

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. 

Step one on the left, select the tabs menu. Step two on the right, add margin on all sides in the spacing section of the style panel.

Tab links

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. 

The style panel displays a tab link selected with the class Current added to the default Tab link class.

 

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.

Step one on the left, select a tab link and make sure the Current class is not active. Step two in the middle, edit the font and font size. Step three on the right, edit the tab background.

Styling the current tab link

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.

A set of tabs called Monthly Plans (selected), Annual plans, and sesquicentennial plans are displayed.

Hover styling for tab links

You can add a hover effect to the tab links with the following steps:

  1. Select a tab link that isn’t current
  2. Choose Hover from the States dropdown menu
  3. Style the tabs how you want them to appear on hover
  4. Select None from the States dropdown
  5. Add a transition in the Style panel with the desired easing and duration
Step one on the left, select the Annual Plans tab. Step two on the right, select Hover (highlighted) in the states drop down menu.

Transitions 

To control the transition between different tab panes:

  1. Select any of the tab elements
  2. Go to the Element Settings panel
  3. Choose the easing from the Easing Method dropdown
  4. Set Fade In/out duration (ms)
Step one on the left, select the tabs menu from the navigator panel. Step two on the right, edit the Easing in the tabs settings panel. a

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top