Tabs are here.

And there are hundreds of ways to use them.
Here are just a few examples.
Do you have a Webflow account?
Interact with this site inside the designer.

Example 1

Information Tabs w/ Interactions

Implement your designs without relying on a developer.

Instead of handing over a PSD file to have it converted into a real website, now with Webflow you can implement your custom, responsive website designs on your own. Plus, you have pixel-perfect control over every detail of your design without having to muck around with code.

This is some text inside of a div block.

Webflow makes it easy to build sophisticated layouts and designs without having to touch a line of code.

This is some text inside of a div block.

All sliders, responsive nav menus, and buttons require custom interactions. With Webflow you can make them all behave the way you want.

This is some text inside of a div block.

With all the common HTML components and CSS properties baked in Webflow's visual UI, you have the power of a web developer.

Build front-end components at the speed of light.

Whether you're an experienced hacker, or you're just getting started in web development, Webflow helps you build HTML/CSS mockups and prototypes faster than ever before.

Spend more time creating, less time fighting CSS

No more switching back and forth between your code editor and your browser. Every change in Webflow generates the correct code right away.

A full range of HTML5 elements and CSS3 properties

Build perfectly semantic markup and utilize the latest and greatest CSS3 properties to create your UIs.

Play nicely with popular frameworks

Decorate your UIs with custom Angular.js bindings, or drop in Webflow code side-by-side to a Bootstrap or Foundation project.

Bring your business ideas to life with beautiful, effective landing pages.

Whether you are just testing out a new idea, or looking to scale your business online, use Webflow to build up your web presence and start reaching more customers now. Our easy drag-and-drop editor allows entrepreneurs and marketers like you to build your landing pages, without writing a single line of code or paying for a developer.

Simple and flexible forms for collecting customer info

Give your visitors an easy way to subscribe to your mailing list, send you messages, feedback, and more with interactive forms.

Easy analytics and tracking integration

Instantly plug Google Analytics into your Webflow site, to track visits, monitor acquisition, and see what visitors do once they find your site.

Optimize your site for SEO

Help people discover your site more easily. Webflow's web builder is catered for robots that crawl the web. You'll get ranked higher on the search engines.

Transform your design team with Webflow.

With Webflow Teams, you'll be able to share your designs, create time-saving templates, and speed up your workflows. Learn how one company saved over a thousand hours by switching their design team over to Webflow

Create hundreds of sites

Don't be limited by our personal plan. Create up to 500 sites in Webflow and manage your team.

Collaborate with your colleagues

Webflow is the first design tool built for collaboration. We've turned our web based tool into the ultimate place to come up with new designs and interactions for your customers.

Easy template management

Once you have the ability to make your own templates you'll be able to create sites at lightning speed.

Description

This tab example is the same format and similar style of the tab section found on the Webflow.com homepage. There are second classes on each of the tabs in order for each Current tab to have a unique color. Both the Tab Links and Arrow icons have interactions associated with them, giving them a ‘Bounce’ effect when clicked.

You can also watch us build this tab from scratch in this video.

This Example Includes
Tabs Interaction (IX)
Multiple Columns
Multi-Colored Tabs

Example 2

Image Gallery Tabs

Cloud Bridge
Photograph by Prochasson Frederic
The Painted Ladies
Photograph by Celso Diniz
COIT TOWER
Photograph by Carol Garanda
The Rock
Photograph by Carol Garanda
Cloud Bridge
Photograph by Francesco Carucci
Description

This example uses the power of Tabs to create an image gallery, with thumbnails being used as the Tab Link. To replicate this model, simply add a class to the Tab Link element and use background images to fill the area.

Also note that the Tab Menu has been moved to below the Tab Pane elements, which is also a possibility with Tabs.

This Example Includes
Background Images Used Within Tab Links
Re-arranged Tab Menu
Basic Hover Treatments

Example 3

Tabs on the Side

Webflow is a tool for a variety of users

Webflow is an online responsive website building tool, that allows you to build production-ready websites directly in your browser. This value transcends more than one particular group, and we believe will change the way users build for the web.

Design sites for every device
Production-ready websites
Drag and drop basic web elements
Implement your designs without relying on a developer.

Instead of handing over a PSD file to have it converted into a real website, now with Webflow you can implement your custom, responsive website designs on your own. Plus, you have pixel-perfect control over every detail of your design without having to muck around with code.

Pixel-perfect layout and design control
Customize your website interactions
You're now a web developer, go forth and conquer
Build front-end components at the speed of light.

Whether you're an experienced hacker, or you're just getting started in web development, Webflow helps you build HTML/CSS mockups and prototypes faster than ever before.

Spend more time creating, less time fighting CSS
A full range of HTML5 elements and CSS3 properties
Play nicely with popular frameworks
Bring your business ideas to life.

Whether you are just testing out a new idea, or looking to scale your business online, use Webflow to build up your web presence and start reaching more customers now. Our easy drag-and-drop editor allows entrepreneurs and marketers like you to build your landing pages, without writing a single line of code or paying for a developer.

Simple and flexible forms for collecting customer info
Easy analytics and tracking integration
Optimize your site for SEO
Transform your design team with Webflow.

With Webflow Teams, you'll be able to share your designs, create time-saving templates, and speed up your workflows. Learn how one company saved over a thousand hours by switching their design team over to Webflow:

Create hundreds of sites
Collaborate with your colleagues
Easy template management
Description

Tabs don’t have to be traditionally laid out. In this example we demonstrate the ability to move Tab Links to the side of the Tabs container, creating a unique layout. Also notice that Tab links can also have icons and images placed inside them.

This example also includes a unique Interaction, that takes advantage of the Tab Triggered Interaction

This Example Includes
Icons Inside Tab Links
Re-arranged Tab Menu
Tab Triggered Interactions

Video Tutoral

Watch us build the tab section from Webflow.com