How to add an attribute:

close icon
Hey! Give us some feedback here.
Components

CMS Tabs

Create a CMS powered native Webflow Tabs component with a Webflow CMS Collection List.

CMS Tabs
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
List
I want this

Collection List

to be the dynamic content for the Tabs
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmstabs-element
copy icon
Value
list
copy icon
Check live example here
This Collection List is the data source for the Tabs component. Tabs content will be dynamically generated based on the items in this Collection list.

For example, if there are 10 items in this Collection, the Tabs will generate 10 Tab Panes and Tab Links.

This List will automatically be removed from the page once its content is added to the Tabs. It is only used to get the dynamic data. It is not for display purposes.
how to add cms tabs list attribute
navigator arrow
TABS
I want this Webflow
tab icon

Tabs

component to display the dynamic content
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmstabs-element
copy icon
Value
tabs
copy icon
This is the visible Tabs component on the page.

Each Collection Item from the List will be added inside each Tab Pane of the Tabs component.

A Tab Link will be generated for each item in the list.

Attributes preserves Tab Pane stylings. Style your Tab's Tab Panes and each Collection Item will be added inside a Tab Pane.
how to add cms tabs attribute
It will show like this:
cms tabs example
navigator arrow
Option
RESET INTERACTIONS
I want to use interactions on the Tab Change
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmstabs-resetix
copy icon
Value
true
copy icon
If you are using Webflow interactions on Tab Change and you want this Tab Change interaction to be applied to all generated CMS tabs, apply this attribute to the implementation.

Warning: When using this attribute, all interactions that have an Initial State will be restored to it, use with caution to avoid unexpected UX behaviors.
Where?
Add to an element with fs-cmstabs-element = "tabs"

Working examples

See this solution working live in this Webflow project.

Example
Tabs with dynamic CMS Content
Trevi Fountain
Rome
/
Italy
Trevi Fountain

The Trevi Fountain is a fountain in the Trevi district in Rome, Italy.

Trevi Fountain
Trevi Fountain
Iguazu Falls
Foz do Iguaçu
/
Brazil
Iguazu Falls

Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil.

Iguazu Falls
Iguazu Falls
Golden Gate Bridge
San Francisco
/
United States
Golden Gate Bridge

The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.

Golden Gate Bridge
Golden Gate Bridge
Statue of Unity
Gujarat
/
India
Statue of Unity

Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.

Statue of Unity
Statue of Unity
Sagrada Família
Barcelona
/
Spain
Sagrada Família

Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona.

Sagrada Família
Sagrada Família
Central Park
New York
/
United States
Central Park

An urban park in New York City located between the Upper West and Upper East Sides of Manhattan.

Central Park
Central Park
Copy and paste this example directly on Webflow
locked icon
Coming soon

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.