Tabs Layout Handler
Generate CMS-bound tabs and nested tabs
Last updated
Was this helpful?
Generate CMS-bound tabs and nested tabs
Last updated
Was this helpful?
SA5 automatically detects when the wfu-layout attribute is positioned on a tabs element, and will create tabs automatically.
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
Create and style your tabs element anywhere you like in your Webflow design.
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 detect
none - no layout engine needed, items are simply moved into the container
tabs - 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.
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.
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.
https://cms-layouts.webflow.io/
This is the most basic Tabs rendition created, before webflow.js has initialized it.
