AttRibutes
List Tabs
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

List Tabs

Create dynamic tabs with CMS Collections Lists in Webflow

Watch a quick tutorial

List Tabs • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

Collection List

Add to the Collection List  

fs-list-element
=
"
list
"

Tabs

Add to Webflow's Tab element

fs-list-element
=
"
tabs
"

Tab Link

Add to the Div or Text Block that represents the dynamic content of the tabs links

fs-list-element
=
"
tab-link
"

Optional attributes

Reset IX

Add to the Tab Component

fs-list-resetix
=
"
true
"
0

Overview

Creating a CMS Tabs element with List Tabs means populating a Tab element with the content of a Collection List.

3 elements are requested to make it work:

  1. A Tabs element
  2. A Collection List
  3. An element in the Collection List Item that will serve as a Tab Link
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>

Copy Script
2

Add these required attributes to the elements

Collection List

The dynamic content for the Tabs
fs-list-element
=
"
list
"

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.

Add this attribute:
Name
fs-list-element
Copy
Value
list
Copy
Add it to those type(s) of element(s):
Collection List
EXAMPLE

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

NOTE

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.

IMPORTANT

You can apply the List Filter, List Load, and List Sort Solutions to this Collection List, allowing dynamic updates to the Tabs element's content based on user interaction.

For example, clicking a Load More link immediately increases the number of tabs. Similarly, activating a Filter or Sort will update and reorder the tabs accordingly.

NOTE

In case you want to use non-CMS content, replicate the CMS structure using div blocks as follows:

Learn everything about using a non-CMS list with the List Solutions on How to use List Solutions on static lists.

Tabs

The dynamic content for the Tabs
fs-list-element
=
"
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.

Add this attribute:
Name
fs-list-element
Copy
Value
tabs
Copy
Add it to those type(s) of element(s):
Tabs
NOTE

Attributes preserves Tab Pane stylings. Style your Tab's Tab Panes and each Collection Item will be added inside a Tab Pane — e.g.; if you add padding to the Tab Pane element, it will be preserved.

Tab Link

The dynamic link element inside the tab link
fs-list-element
=
"
tab-link
"

This attribute is added to an element that's inside of the List Item element.

This element will be used as the content of the Tab Link for each item. It can be a simple Text element, or a Div with mixed content — e.g.; an Image and a Text Block. It usually reflects the title of the List Item.

NOTE

The element on which you add this attribute will be moved inside of the corresponding Tab Link. On the published site, it will only appear in the Tab Link element, and disappear from its original position in the List Item element — that now shows up in the Tab Pane element.

Add this attribute:
Name
fs-list-element
Copy
Value
tab-link
Copy
Add it to those type(s) of element(s):
Div Block
Text Block
3

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

settings

Reset Interactions

Use interactions on the Tab Change
fs-list-resetix
=
"
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.

Add this attribute:
Name
fs-list-resetix
Copy
Value
true
Copy
Add it to any element with
fs-list-element = "tabs"
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.

Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-list-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-list-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-list-instance = "1"
fs-list-instance = "2"
fs-list-instance = "blog"
fs-list-instance = "team"
Learn more ways to set up multiple instances and how it works

Still need help?

Get Support