Tabs JS Required

Tab navigation for organizing content into separate views with smooth switching animations. See JavaScript implementation →

Basic Tabs

Default tab navigation with underline indicator for the active tab.

Overview

This is the overview panel content. Use tabs to organize related information into separate views.

Profile

This is the profile panel content. Each panel can contain any HTML content.

Settings

This is the settings panel content. Tabs provide a clean way to organize complex interfaces.

Disabled

This panel cannot be accessed because the tab is disabled.

HTML

<div class="focus-tabs">
  <div class="focus-tab-list" role="tablist">
    <button class="focus-tab focus-tab-active" role="tab" data-tab="tab1">
      <i class="fa fa-home"></i> Overview
    </button>
    <button class="focus-tab" role="tab" data-tab="tab2">
      <i class="fa fa-user"></i> Profile
    </button>
    <button class="focus-tab" role="tab" data-tab="tab3">
      <i class="fa fa-cog"></i> Settings
    </button>
    <button class="focus-tab" role="tab" data-tab="tab4" disabled>
      <i class="fa fa-lock"></i> Disabled
    </button>
  </div>
  <div class="focus-tab-panels">
    <div class="focus-tab-panel focus-tab-panel-active" id="tab1">
      <h3>Overview</h3>
      <p>Panel content...</p>
    </div>
    <div class="focus-tab-panel" id="tab2">
      <h3>Profile</h3>
      <p>Panel content...</p>
    </div>
    <!-- More panels... -->
  </div>
</div>

Pills Style

Pill-shaped tabs with filled background for the active state using .focus-tabs-pills.

Dashboard content with key metrics and charts.

Analytics content with detailed data analysis.

Reports content with generated documents.

Export content with download options.

HTML

<div class="focus-tabs focus-tabs-pills">
  <div class="focus-tab-list" role="tablist">
    <button class="focus-tab focus-tab-active" role="tab" data-tab="pill1">Dashboard</button>
    <button class="focus-tab" role="tab" data-tab="pill2">Analytics</button>
    <button class="focus-tab" role="tab" data-tab="pill3">Reports</button>
  </div>
  <div class="focus-tab-panels">
    <div class="focus-tab-panel focus-tab-panel-active" id="pill1">...</div>
    <div class="focus-tab-panel" id="pill2">...</div>
    <div class="focus-tab-panel" id="pill3">...</div>
  </div>
</div>

Boxed Style

Boxed tabs with card-like appearance using .focus-tabs-boxed.

Monthly statistics and data visualization.

Yearly statistics and trends.

All-time statistics and historical data.

HTML

<div class="focus-tabs focus-tabs-boxed">
  <div class="focus-tab-list" role="tablist">
    <button class="focus-tab focus-tab-active" role="tab" data-tab="box1">Month</button>
    <button class="focus-tab" role="tab" data-tab="box2">Year</button>
    <button class="focus-tab" role="tab" data-tab="box3">All Time</button>
  </div>
  <div class="focus-tab-panels">
    <div class="focus-tab-panel focus-tab-panel-active" id="box1">...</div>
    <div class="focus-tab-panel" id="box2">...</div>
    <div class="focus-tab-panel" id="box3">...</div>
  </div>
</div>

Vertical Tabs

Vertical layout with tabs on the left side using .focus-tabs-vertical.

Account Settings

Manage your account information, email, and password.

Notification Settings

Control your notification preferences and alerts.

Privacy Settings

Configure your privacy and security options.

Appearance Settings

Customize the look and feel of your interface.

HTML

<div class="focus-tabs focus-tabs-vertical">
  <div class="focus-tab-list" role="tablist">
    <button class="focus-tab focus-tab-active" role="tab" data-tab="vert1">
      <i class="fa fa-user"></i> Account
    </button>
    <button class="focus-tab" role="tab" data-tab="vert2">
      <i class="fa fa-bell"></i> Notifications
    </button>
    <!-- More tabs... -->
  </div>
  <div class="focus-tab-panels">
    <div class="focus-tab-panel focus-tab-panel-active" id="vert1">...</div>
    <div class="focus-tab-panel" id="vert2">...</div>
  </div>
</div>

JavaScript

Tabs require JavaScript to handle switching between panels. This code works with the tab examples above.

JavaScript

// Initialize tabs
document.querySelectorAll('.focus-tabs').forEach(tabsContainer => {
  const tabs = tabsContainer.querySelectorAll('.focus-tab');
  const panels = tabsContainer.querySelectorAll('.focus-tab-panel');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      if (tab.disabled) return;

      // Remove active class from all tabs and panels
      tabs.forEach(t => t.classList.remove('focus-tab-active'));
      panels.forEach(p => p.classList.remove('focus-tab-panel-active'));

      // Add active class to clicked tab
      tab.classList.add('focus-tab-active');

      // Show corresponding panel
      const targetPanel = tabsContainer.querySelector('#' + tab.dataset.tab);
      if (targetPanel) {
        targetPanel.classList.add('focus-tab-panel-active');
      }
    });
  });
});

CSS Classes Reference

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