Buy Us a Beer!Community ForumMicro-Consulting

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

LogoCMS Tabs + Nestingsa5-layout.webflow.io
Demo
LogoSA5 Layout Library - WebflowSA5 Layout Library
Cloneable

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.

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

Was this helpful?