Tabs

CMS tabs with dynamic number of tab panes and links
Scroll
Scroll
Scroll
Scroll
Scroll

Use cases

Dynamic tabs count
You need a tabs component that has a dynamic amount of tabs based on how many items are in the CMS Collection.
Fixed, high amount of tabs
You need a fixed amount of tabs, but you reach your 20 Collection List per page limit. Set your fixed tab limit by setting a "Limit" on the Collection List.

How to use it

Paste before </body> tag of the page you're working with.

<!-- F'in sweet CMS Library for Webflow -->
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.6.js"></script>

<script>
// immediately/self invoked function. This function executes right away
(function() {
  // create a new Library instance and store it in a variable called "fsTabs"
  var fsTabs = new FsLibrary('.fs-dynamic-feed')  // Class of your hidden CMS collection list

  // run tabs on our instance
  fsTabs.tabs({
    tabComponent: '.fs-tabs',  // Webflow Tabs component
    tabName: '.fs-tab-name'  // class of the plaintext that will be used for the name of the tab
  })
})();
</script>

Copy code

Code explanation

fsTabs

The variable we created to store our Library instance. The name of the variable can be set to whatever you want.

new FsLibrary

The class of the hidden Collection List that holds our dynamic CMS List.

tabComponent

The class of the Webflow Tabs component that will display our dynamic CMS List.

tabName

The class of the text that will be the visible name of the tab for that item.

This can be hidden within the item. Whatever text is within ~.fs-tab-name~ will be placed inside the tab button.

HTML and class setup

IMPORTANT: This is easy to set up. You must understand how to structure your page for this to work.

2 parts:
1) A native Webflow tabs component (tabComponent)

The outer parent of the native Webflow tabs component needs a class. In this example, we call it ~.fs-tabs~

2) A hidden CMS Collection List (new FsLibrary)

The CMS Collect List that will hold the dynamic information we want to display in the tabs component. This will be hidden on the page. In this example, we call it ~.fs-dynamic-feed~

What happens

CMS Library is going create a new ~.fs-tabs-link~ and ~.fs-tabs-pane~ for every item inside of your ~.fs-dynamic-feed~. If you have 50 items inside your ~.fs-dynamic-feed~, there will be 50 ~.fs-tabs-pane~ elements created. We will then "copy" ~.fs-dynamic-content~ and paste it in the ~.fs-tabs-pane~ that was created for that item.

Dynamic tab name (tabName)
Use a text element connected to a CMS field to name the item's tab.

Add a text element inside your ~.fs-dynamic-content~ element. Give it a class. In this example, we call it ~.fs-tab-name~.

What happens

CMS Library is going "copy" ~.fs-tab-name~ from each item and "paste" it in the ~.fs-tabs-link~ that was created for that item.