A real-life true CMS-driven native Webflow tabs component
The structure of our CMS Collection List (the feed)
The structure of our native Webflow Tabs
The .tabs() component to create a CMS powered tabs element.
These are native Webflow tabs
In Designer, this tabs component has 3 tabs
The CMS List below is our "data feed". This will populate new Tab Links and Tab Panes in the Tabs component above.
On the published website, CMS Library creates a new new Tab Link and Tab Pane for each CMS Item in the list below.
The child of the CMS Dynamic Item ('.tabs-this-is-copied-to-tab') is 'copy and pasted' inside each 'Tab Pane' above. Our '.tab-name' defines the text inside the Tab Link
This allows you to create a 100% CMS-driven Webflow native tabs component 💪
You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.
You can delete all .delete-me divs! All of the How-To content is in the .clonable divs.