> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/nc/advanced/tabs.md).

# Tabs

{% hint style="success" %}
Current Prototype is v1.2.0 
{% endhint %}

## Features

* Assemble any arrangement of tabs and tab content 
* Use any component as tab content 
* Build mode support 

{% hint style="warning" %}
As of v1.1.0 ( unreleased )- 
{% endhint %}

* 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. 

{% hint style="success" %}
Works with Webflow's build mode.  Simply create the inner components you want to slot within each **Tabs | Content** component. 
{% endhint %}

Video walkthrough-  

{% embed url="<https://www.loom.com/share/9cc5387808f14e45b6074daadc80e493>" %}

## Usage Notes&#x20;

1. Add your Tabs component to the form.&#x20;
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&#x20;
4. Connect them together by defining a matching Tab Identifier property like `Tab 1`, `Tab 2`, etc.  See the video for reference.&#x20;

### `Tabs` Component&#x20;

Properties;&#x20;

* **Initial Tab Identifier** - use to select the initial tab&#x20;

{% hint style="warning" %}
As of v1.1.0, if the Initial Tab Identifier is blank, the first tab will be selected.&#x20;
{% endhint %}

Slots;&#x20;

* **Tabs** - place your `Tabs | Tab` components here&#x20;
* **Tab Content** - place your `Tabs | Content` components here&#x20;

### `Tabs | Tab` Component&#x20;

Properties;&#x20;

* **Title** - the displayed title text for the tab&#x20;
* **Tab Identifier** - a unique string to identfy the tab&#x20;

### `Tabs | Content` Component&#x20;

Properties;&#x20;

* **Tab Identifier** - a unique string to identfy the tab pane&#x20;

Slots;&#x20;

* **Content** - place any content components you design here&#x20;

## Technical Notes&#x20;

* JavaScript is used for initialization;
  * to identify the initial tab
  * to select the initial tab and content&#x20;
  * to clean any collection lists used for CMS-driven tabs&#x20;
* 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.&#x20;

### Reference HTML&#x20;

Before Webflow\.js runs, this is a simple default tabs setup.  We recreate this using our component approach.&#x20;

```html
<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>

```