Tabs JS Enhanced

Tab navigation for organizing content. Works automatically with data attributes, or use the JavaScript API for programmatic control.

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">
    <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!

JavaScript API

Switch tabs programmatically with one line of code:

Home content

Profile content

Settings content

JavaScript

// Switch to a tab by ID
Tabs.switch('profile')

// Or specify the container if you have multiple tab groups
Tabs.switch('settings', '#myTabs')

Tabs.switch(tabId, container)

Switch to a tab by its ID.

Tabs.switch('profile')              // Finds first .focus-tabs container
Tabs.switch('settings', '#myTabs')  // Specific container

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>

CSS Classes

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