Tabs

Setup

Variants

Horizontal Tabs

Vertical Tabs

Autoplay Tabs

How It Works

This library takes a different approach from traditional tab implementations. Instead of relying on array indices or DOM order, tabs are linked by matching data-tabs-trigger-valueCopy and data-tabs-panel-valueCopy attributes.

This value-based linking gives you superpowers:

• Triggers and panels can live anywhere in the DOM (not just as siblings)
• Multiple triggers can control the same panel
• Order doesn't matter – matching is by value, not position
• Deep nesting works without special configuration

In the background, the library handles all the accessibility requirements (ARIA roles, states, keyboard navigation), sets up IntersectionObserver for intelligent autoplay pausing, and exposes CSS custom properties for animations that stay perfectly in sync.

Structure

Three elements are required:

• [data-tabs="container"]Copy – the outermost container, used for scoping
• [data-tabs-trigger-value="..."]Copy – the tab trigger buttons
• [data-tabs-panel-value="..."]Copy – the content panels

<div data-tabs="container">
  <div role="tablist">
    <button data-tabs-trigger-value="overview">Overview</button>
    <button data-tabs-trigger-value=

Webflow CMS

The value-based approach works great with Webflow's Collection List structure:

1. [data-tabs="container"]Copy – goes on an ancestor of the Collection List WrapperCopy, or on the wrapper itself if you don't need navigation buttons inside
2. [data-tabs-trigger-value]Copy – goes on trigger elements (pull the value from a CMS field)
3. [data-tabs-panel-value]Copy – goes on the Collection List ItemCopy (use the same CMS field)

Since triggers and panels are matched by value rather than position, you can have your tab triggers in one Collection List and your panels in another – as long as the values match, they'll connect.

Customization

Container Configuration

Autoplay Configuration

Content Linking

Navigation Elements

Optional controls that work automatically when placed inside the container:

<div data-tabs="container" data-tabs-autoplay="true">
  <!-- Triggers and panels here -->
  <div>
    <button data-tabs="prev">Previous</button>
    <button data-tabs="next"

Keyboard Navigation

When enabled (default), arrow keys navigate between tabs based on data-tabs-orientationCopy:

• Horizontal: Arrow LeftCopy / Arrow RightCopy
• Vertical: Arrow UpCopy / Arrow DownCopy

Additional keys:

• HomeCopy – jump to first tab
• EndCopy – jump to last tab
• EnterCopy / SpaceCopy – activate focused tab (when activate-on-focusCopy is false)

State Classes

The library applies state classes that you can style however you want.

Here's an example styling the active trigger:

/* Base trigger styles */
.tabs_trigger {
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: border-color 200ms ease;
}
 
/* Active trigger */

CSS Custom Properties

These enable powerful CSS-only effects:

/* Sliding indicator that follows the active tab */
.tabs_indicator {
  transform: translateX(calc(var(--tabs-active-index) * 100%));

JavaScript API

Manual Initialization

// Auto-initializes on page load by default
// Or manually initialize:
const tabs = window.Tabs.init('[data-tabs="container"]');

Instance Methods

tabs.goTo("pricing"); // Go to specific tab by value
tabs.next(); // Go to next tab
tabs.prev(); // Go to previous tab
tabs.

All methods are chainable except getActiveValueCopy (returns data) and destroyCopy (resets DOM to pre-init state):

tabs.goTo("overview").play();

Events

Listen for events using native DOM addEventListenerCopy:

container.addEventListener("tabs:change", (e) => {
  console.log(e.detail); // { tabs, value, previousValue }
});
 
container.

Available events:

Global API

// Get instance by selector or element
const tabs = window.Tabs.get(".my-tabs");
 
// Get all instances
const allTabs = window.Tabs.getAll();
 

Dynamic Content

When adding/removing tabs, call refresh()Copy:

// After modifying the DOM
tabs.refresh();

The refresh method attempts to maintain the current active tab if it still exists.

URL Deep Linking

Enable URL syncing with the data-tabs-group-nameCopy attribute:

<div data-tabs="container" data-tabs-group-name="section">
  <!-- tabs... -->
</div>

Now ?section=pricingCopy in the URL will activate the "pricing" tab on page load, and clicking tabs will update the URL without a page reload.

Priority order for initial tab: URL parameter > data-tabs-defaultCopy > first trigger

FAQ