Tabs Element

Interact with Webflow's Tabs Element

Overview

This feature allows you to work with the Webflow tabs element programmatically.

• Switch tabs programmatically- first, next, prev, and last, or go to a specific tab index

  • See the Deck Controller for a nocode control approach

• Get the current tab index

• Receive JavaScript events when the tab is changed, even if it is changed by code

Demonstration

Check the tabs demonstrations here-

Test

Demo

Webflow Smart Elements - WebflowWebflow Smart Elements

Cloneable

Use Cases

Enhance navigation;

• Link a button or other element to your tab element, to trigger navigation to the first, last, next, or previous tab. These elements can be anywhere on your page, including within the tab element. You can have as many of them as you like.

• Programmatically navigate the tabs element using JavaScript.

Add dynamic page behaviors;

• Do something on your page when a tab is changed.

Attributes

Setup your tabs element using these attributes.

wfu-tabs = ( name )

Add the wfu-tabs custom attribute to the a Tab element. Give it a unique name to identify that tabs element uniquely, e.g. tabs1.

This makes the tab element accessible in code, and selectable by the other tabs custom attributes.

The Tabs element name should be unique within the page.

wfu-tab-default attribute

Add the wfu-tab-default custom attribute to a specific tab directly. This tab will be automatically selected on page load.

wfu-tab-name = ( name )

Optional. Add the wfu-tab-name custom attribute to a specific tab directly. This will enable it to be selected as a named item using a deck controller. Alternatively, the tab number ( 1, 2, 3 ) can be used.

Tab names should be unique within the tabs element. Tab names are a discrete attribute so that they can be CMS bound attributes in the future.

Changelog

2024-Feb-04 - Added nocode navigation support through Deck Controller elements.

2023-Aug-19 - Added tabChanged callback event. Tabs has also been moved into the elements library, and is using our standarized "deck" interface which means the methods and properties here should align with similar deck-type elements such as the Slider.

Getting Started

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply the custom attributes to the elements you want to affect

See above for details.

STEP 3 - ( OPTIONAL ) Use the API & Callbacks to control the element from your custom code

See above for details.