Tabs

Auto-Initialized

Add data-tab="id" to your tab buttons and they work automatically! Or control them with Tabs.switch('id') - just one line.

Basic Tabs

Default tab navigation with underline indicator:

Overview

Use tabs to organize related information into separate views.

Profile

Each panel can contain any HTML content.

Settings

Tabs provide a clean way to organize complex interfaces.

HTML

<div class="focus-tabs">
  <div class="focus-tab-list" aria-label="Project views">
    <button class="focus-tab focus-tab-active" data-tab="tab1">Overview</button>
    <button class="focus-tab" data-tab="tab2">Profile</button>
    <button class="focus-tab" data-tab="tab3">Settings</button>
  </div>
  <div class="focus-tab-panels">
    <div class="focus-tab-panel focus-tab-panel-active" data-tab="tab1">
      <p>Overview content</p>
    </div>
    <div class="focus-tab-panel" data-tab="tab2">
      <p>Profile content</p>
    </div>
    <div class="focus-tab-panel" data-tab="tab3">
      <p>Settings content</p>
    </div>
  </div>
</div>

It Just Works

Tabs with data-tab attributes are automatically interactive. No manual JavaScript required!

Pills Style

Pill-shaped tabs with filled background using .focus-tabs-pills:

Dashboard content with key metrics.

Analytics with detailed data.

Reports with generated documents.

HTML

<div class="focus-tabs focus-tabs-pills">
  <!-- tabs here -->
</div>

Boxed Style

Card-like appearance using .focus-tabs-boxed:

Monthly statistics.

Yearly trends.

All-time data.

HTML

<div class="focus-tabs focus-tabs-boxed">
  <!-- tabs here -->
</div>

Vertical Tabs

Vertical layout with .focus-tabs-vertical:

Account Settings

Manage your account information.

Notifications

Control your notification preferences.

Privacy

Configure privacy and security options.

HTML

<div class="focus-tabs focus-tabs-vertical">
  <!-- tabs here -->
</div>

Keyboard and lifecycle

Development builds provide automatic activation with Left/Right arrows (Up/Down for vertical tabs), Home and End. Disabled tabs are skipped. One active tab participates in the tab sequence; panels have linked tab/tabpanel semantics. Give each tab list a meaningful aria-label or aria-labelledby for your application.

Tabs.init(container) discovers dynamic tab groups, and Tabs.destroy(container) removes their click and key handlers while retaining current state. Call init again to restore interaction. These lifecycle and keyboard additions are not present in published CDN v2.0.0.

JavaScript API

Tabs are auto-initialized via data-tab attributes. Use the API for programmatic control.

Home content

Profile content

Settings content

Switch Tab

JavaScript

Tabs.switch('profile')
Tabs.switch('settings', '#myTabs')

Methods

Method	Description
`Tabs.switch(tabId, container?)`	Switch to a tab by ID. Container defaults to first `.focus-tabs` on page.
`Tabs.activate(button)`	Activate an enabled tab button or selector in its own group.
`Tabs.init(container?)`	Development build: discover tab groups; repeated initialization preserves one listener pair per group. Defaults to document.
`Tabs.destroy(container)`	Development build: remove click/key listeners within the container, retaining markup and selection.

CSS Classes Reference

Class	Description
`.focus-tabs`	Main container
`.focus-tab-list`	Tab buttons container
`.focus-tab`	Individual tab button
`.focus-tab-active`	Active tab state
`.focus-tab-panels`	Panels container
`.focus-tab-panel`	Individual panel
`.focus-tab-panel-active`	Active panel (visible)
`.focus-tabs-pills`	Pills style variant
`.focus-tabs-boxed`	Boxed style variant
`.focus-tabs-vertical`	Vertical layout