Dynamic Webflow Tabs with Webflow CMS Collection List

Scroll horizontally to see documentation

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.

List

I want this

Collection List

to be the dynamic content for the Tabs

See how it works

Add this attribute

Description

Name

fs-cmstabs-element

Value

list

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.

TABS

I want this Webflow

Tabs

component to display the dynamic content

See how it works

Add this attribute

Description

Name

fs-cmstabs-element

Value

tabs

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.

It will show like this:

TAB LINK

I want this

Div Block or Text Block

to be the element inside the tab link

See how it works

Add this attribute

Description

Name

fs-cmstabs-element

Value

tab-link

This is content within the Collection Item that is used as the content of the Tab Link.

Set this on any element inside the Collection Item. This element will be dynamically added as the Tab Link.

It will show like this:

Option

RESET INTERACTIONS

I want to use interactions on the Tab Change

See how it works

Add this attribute

Description

Name

fs-cmstabs-resetix

Value

true

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"

I want to have more than one instance of CMS Tabs on the same page

See how it works

Optional

This element is optional to add

You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
‍
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.

Example of this solution:

Attributes that must have instances

Second instance example

Third instance example

fs-cmstabs-element = "list"

fs-cmstabs-element = "list-2"

fs-cmstabs-element = "list-3"

fs-cmstabs-element = "tabs"

fs-cmstabs-element = "tabs-2"

fs-cmstabs-element = "tabs-3"