Tabs

Features

• Assemble any arrangement of tabs and tab content

• Use any component as tab content

• Build mode support

• If no Initial Tab Identifier is specified, the first tab is selected automatically

• Full CMS compatibility; create your tabstrip from the CMS

  • Use two collection lists, one for the tabs, one for the content panes. Bind the slug as the Tab Identifier.

  • Mixed static + CMS tabs also works

Design

This is a 1:1 recreation of Webflow's native tabs element, consisting of 3 components;

• Tabs component

• Tabs | Tab component

• Tabs | Content component

The are assembled together using slots to create the tabs component.

Video walkthrough-

Usage Notes

1. Add your Tabs component to the form.

2. In the Tabs slot, add as many Tabs | Tab components as you like

3. In the Contens slot, add as many Tabs | Content components as you like

4. Connect them together by defining a matching Tab Identifier property like Tab 1, Tab 2, etc. See the video for reference.

Tabs Component

Properties;

• Initial Tab Identifier - use to select the initial tab

Slots;

• Tabs - place your Tabs | Tab components here

• Tab Content - place your Tabs | Content components here

Tabs | Tab Component

Properties;

• Title - the displayed title text for the tab

• Tab Identifier - a unique string to identfy the tab

Tabs | Content Component

Properties;

• Tab Identifier - a unique string to identfy the tab pane

Slots;

• Content - place any content components you design here

Technical Notes

• JavaScript is used for initialization;

  • to identify the initial tab

  • to select the initial tab and content

  • to clean any collection lists used for CMS-driven tabs

• Native component is embedded inside, in a visibility: hidden approach. This ensures the correct CSS and JS will be published by the designer, even though the element HTML itself is not.

Reference HTML

Before Webflow.js runs, this is a simple default tabs setup. We recreate this using our component approach.

<div
  data-current="Tab 1"
  data-easing="ease"
  data-duration-in="300"
  data-duration-out="100"
  class="w-tabs"
>
  <div class="w-tab-menu">
    <a
      data-w-tab="Tab 1"
      class="w-inline-block w-tab-link w--current"
    >
      <div>Tab 1</div>
    </a>
    <a
      data-w-tab="Tab 2"
      class="w-inline-block w-tab-link"
    >
      <div>Tab 2</div>
    </a>
    <a
      data-w-tab="Tab 3"
      class="w-inline-block w-tab-link"
    >
      <div>Tab 3</div>
    </a>
  </div>

  <div class="w-tab-content">
    <div
      data-w-tab="Tab 1"
      class="w-tab-pane w--tab-active"
    ></div>
    <div
      data-w-tab="Tab 2"
      class="w-tab-pane"
    ></div>
    <div
      data-w-tab="Tab 3"
      class="w-tab-pane"
    ></div>
  </div>
</div>