How do I add tabs in Webflow?

Add the tabs and see the pieces

Open the Add panel, go to Components, and drag Tabs onto the canvas. The element fills the width of its parent. The wrapper holds a tabs menu and the tabs content. The menu starts with three tab links, and each link has a text block. The content starts with three panes, one per link.

Example: a pricing section needs Monthly, Yearly, and Teams. The three default tabs match that set. You do not need a fourth until you have a fourth offer. If the section should show and hide CMS fields instead of switching panes, that is conditional visibility, not tabs.

Change the visible name and fill each pane

The name in Tabs settings is only for your list in the Designer. It does not change the word visitors read. Select the text block inside the tab link and type Monthly, Yearly, or Teams.

To add a tab, select any element in the tabs, open Element settings, and click the plus icon under Tabs settings. Webflow adds a tab link and a pane together. The trash icon deletes the tab you choose. Deleting a link also deletes its pane. Deleting a pane also deletes its link.

Switch panes before you design them. Choose the pane in the Navigator, or select a pane and use the left and right arrow keys. Then drag content into that pane, or select the pane and click an element in the Add panel to insert it. Put the price, a short paragraph, and a button in each pane. Preview mode lets you click the links and read each pane before you publish.

Style the open tab so it looks selected

Give every tab link the same class. Style one link that is not the current one, and the others share that style. Webflow adds a Current combo when a tab is selected. Select the active link and change its background or type color so the open tab is obvious. Visitors see that current style on the live page, not only in the Designer.

For a hover style, select a link that is not current, choose Hover in the states menu, change the color, return to None, and add a transition if the color should ease.

Webflow's accessible elements article says tabs need a visible focus style on the tab link, or on all links. Add that outline on the focused state. Someone moving through the page with a keyboard should be able to see which label is active. Contrast between the label and the menu background matters for the same reason.

Choose the tab that loads first

In Tabs settings, Set Active Tab chooses the pane you are editing. It also chooses the pane that is open when the page loads. If Yearly was selected while you styled it, visitors may land on Yearly. Set it back to Monthly before you publish if Monthly is the offer you want first.

The change between panes has its own timing. Select any part of the tabs, open Element settings, choose an easing, and set the fade in and out duration in milliseconds. That fade is separate from the hover transition on the links. A long fade can make the price feel late. Keep it short enough that the new pane is readable right away.

One heading for the whole section can sit above the tabs. Inside a pane, start with the price or a short label rather than a second H1. The page still needs one clear H1. The tab labels are navigation, not a stack of page titles.

Publish and click every tab

Publish and open the live page. Click each link. Confirm the matching price shows, and that Monthly is the first pane if that is what you set. Press Tab on the keyboard until a tab link is focused. You should see the focus outline, then move across the labels and open another pane.

On a phone, the menu still uses the full width of the parent. If three long labels collide, shorten the words or give the menu more room. Check that the button inside the open pane can be tapped. A tab that shows the right label and the wrong price is usually content left in the wrong pane, or Set Active Tab still pointing at the pane you edited last. Fix that, publish again, and click through the live links once more.