# Tabs Layout Handler 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 {% embed url="" %} Demo {% endembed %} {% embed url="" %} Cloneable {% endembed %} ## 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 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. ### 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. {% hint style="info" %} You can CMS-bind this attribute as well to pull the tab name from the CMS. {% endhint %} ### 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 ## Technical Notes

{% hint style="info" %} This is the most basic Tabs rendition created, before webflow\.js has initialized it. {% endhint %} {% code overflow="wrap" %} ```html

``` {% endcode %}