Tabs Layout Handler
Generate CMS-bound tabs and nested tabs
SA5 automatically detects when the wfu-layout attribute is positioned on a tabs element, and will create tabs automatically.
Use Cases
Create tabs from CMS content
Create nested tabs from two collection lists in a master-detail arrangement
e.g. Categories and Products
e.g. Countries and Cities
Demo
Usage Notes
Create and style your tabs element anywhere you like in your Webflow design.
Setup your tabs element
wfu-layout = ( name )
Add this directly to your tabs element, and assign it a unique name in your page.
wfu-layout-handler = auto | none | tabs
auto( default) - automatically detectnone- no layout engine needed, items are simply moved into the containertabs- use the tabs layout handler
Place on any element which has the wfu-layout attribute.
In auto mode, SA5 automatically detects when the wfu-layout attribute is positioned on a tabs element, and will create tabs automatically.
Setting tab names
The tabs themselves are given a text name;
wfu-layout-item-name = ( name )
Place this on any element with the wfu-layout-target attribute.
You can CMS-bind this attribute as well to pull the tab name from the CMS.
Initializing the tabs element
Here are some options on initializing the tabs element
wfu-layout-init = ( setting )
clear- Removes any existing tabs before adding the new ones
wfu-preload = ( setting )
hidden- Hides the tabs element on page load, until they're rendered.
Demonstration
https://cms-layouts.webflow.io/
Technical Notes
This is the most basic Tabs rendition created, before webflow.js has initialized it.
Last updated
