new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Webflow's tabs element enables you to easily add responsive, tabbed content to your project. This video covers three aspects of tabs:

  1. Adding tabs to your website
  2. Adding content to the tabs
  3. Styling tabs
Clone this projectDownload project assetsDownload lesson assets

Transcript

Tabs are a great way to add responsive, tabbed content to your project. And we're going to recreate this example in three different parts: adding tabs, adding content, and styling tabs.

Let's add our Tabs. And we can find this in our Elements Panel under Components. And when we drag Tabs into our project, they'll automatically fill up whatever container they're in. In this case, we've dropped this element into a container.

And by default, we're given three tabs. With any element in our Tabs Menu selected, let's go right on over to the Element Settings Panel, and switch between our active (or Current) tabs.

If we want to add a tab? Of course, we just add a tab. Or delete a tab. We can also rename these tabs in the Tab Settings — and this is great for internal organization. But keep in mind if we want to change the actual text that appears in the tabs menu, we'll have to double click to type in our own content. And we'll do that right now in each of these three tabs, so later on we can place the correct content in each tab pane.

That's adding tabs.

Let's look at content.

And the structure of the Tabs element is fairly straightforward. In the Navigator, we have the Tabs Menu (this is where our tab links live) and the Tabs Content. This is where all the tab panes are — each tab has its own pane. Let's take a look at that.

And we've pre-populated some content in a series of symbols to save time during this demonstration, so we're going to drag our content from Symbols right into the first tab pane.

And just like we can select each tab in our Element Settings Panel, we have a similar control in the Navigator. Let's select the second tab pane, of course that switches over, and we can grab our next symbol and drag it right into the second tab pane. And of course, we can select our third tab pane, and grab our third block of content to drag into that one.

When we go to preview, we see our content load up perfectly as we switch between the tabs.

That's adding content.

Finally, let's style everything.

And we'll start by going over and selecting the Tabs Menu from the Navigator, then heading to the Element Style Panel. From here, we'll add some space underneath our Tabs Menu to give us some breathing room between the links and the content. Which will look significantly better, as we can see when we preview and switch between the different tabs.

Back out of Preview, we'll move forward and style our actual tab links. And to do that, let's select any of our tab links, and we'll go on over to create a class so we can use the same styles on all of them. Now since we created our class on the first and current tab link, we're also getting the indication that it's the Current tab link, which is indicated in green.

Let's select our second tab link and proceed to add the same, brand-new class to that one, too. And then, finally, we'll select our third tab link, and of course, add the class one more time so we can make sure we're styling everything uniformly.

Now we can start styling our class right here while the third tab link is selected. We'll go over and select a font color from our Color Picker. In this case, let's choose white. And we can also make other changes to typography like font size, and let's set our text to uppercase.

We’ll take a look at the background color. And if we select our Color Picker from here, we'll be able to set our color to white, which makes things particularly low-contrast, and we can drop our opacity to increase visibility.

Once we're done there, let's select the active (or current) tab so we can style the Current state. For this one, let's change our background color as well, this time to solid white with 100% opacity. And let's change our font color so we can actually read it. Which is always a nice feature when it comes to design.

Let's click out and go right over to Preview to see our hard work in action. As we click the different Tab Links, we can see our content appear — with the styles we've applied to our Tab Link class.

Let's add styling on hover. We can select any tab link that isn't Current and head over to States to select our Hover state. And from here, we have the option to add or modify styles on hover (like the background color). Let's ramp up our opacity a bit. This time, let's type the percentage right into the Color Picker. When we click out and go to Preview, we can see our hover state looks great.

Now we can also control the transition between different Tab Panes. With any of the tabs elements selected, you can visit the Element Settings Panel to access various transition controls, like the fade type (where we select the easing method). We can also control the duration for both fading in (when we click a tab link) and fading out. And once we're done there, let's look at these changes right over in Preview. Selecting between the tabs shows us that transition — now with a longer duration.

Finally, it's worth noting that we can control styles for different device widths. And you can see by default — on smaller screen widths — that the content stacks vertically instead of crowding horizontally.

So, we can add tabs right into our project. In each pane, we can add content. And we can style each and every aspect...of the Tabs element.