Tabs

Tabs organize content into separate views where only one view is visible at a time.

Usage

Use tabs to group related content and let users switch between different sections without leaving the page.

Basic Tabs

This is the Overview tab content. Tabs help organize information into digestible sections.

<div class="df-tabs">
  <div class="df-tabs__list" role="tablist">
    <button class="df-tabs__tab df-tabs__tab--active" role="tab">Overview</button>
    <button class="df-tabs__tab" role="tab">Features</button>
    <button class="df-tabs__tab" role="tab">Pricing</button>
  </div>
  <div class="df-tabs__panel" role="tabpanel">
    <!-- Tab content -->
  </div>
</div>

With Icons

Home tab content with an icon.

<button class="df-tabs__tab" role="tab">
  <svg><!-- icon --></svg>
  Home
</button>

Variants

Underline (Default)

Pill

Boxed

<div class="df-tabs df-tabs--pill">...</div>
<div class="df-tabs df-tabs--boxed">...</div>

Sizes

Full Width

<div class="df-tabs df-tabs--full">...</div>

With Badge

<button class="df-tabs__tab" role="tab">
  Pending
  <span class="df-badge df-badge--warning df-badge--sm">5</span>
</button>

Disabled Tab

Vertical Tabs

Account Settings

Manage your account information and preferences.

<div class="df-tabs df-tabs--vertical">
  <div class="df-tabs__list" role="tablist">
    <button class="df-tabs__tab df-tabs__tab--active" role="tab">Account</button>
    <button class="df-tabs__tab" role="tab">Security</button>
  </div>
  <div class="df-tabs__panel" role="tabpanel">
    <!-- Content -->
  </div>
</div>

JavaScript Usage

import { Tabs } from '@everforth/design-system';

// Initialize
const tabs = new Tabs('#my-tabs');

// Switch to a specific tab
tabs.select(1); // Select second tab

// Events
tabs.on('change', (index) => {
  console.log('Switched to tab:', index);
});

Accessibility

• Use role="tablist" on the tab container
• Use role="tab" on each tab
• Use role="tabpanel" on content panels
• Set aria-selected on tabs
• Link tabs to panels with aria-controls
• Support arrow key navigation

Best Practices

• Keep tab labels short (1-2 words)
• Don't use too many tabs (5-7 max)
• Consider vertical tabs for long labels
• Show active state clearly

API Reference

Classes

Class	Description
df-tabs	Base tabs container
df-tabs--underline	Underline style (default)
df-tabs--pill	Pill style
df-tabs--boxed	Boxed style
df-tabs--vertical	Vertical layout
df-tabs--full	Full width tabs
df-tabs--sm	Small size
df-tabs--lg	Large size
df-tabs__list	Tab list wrapper
df-tabs__tab	Individual tab
df-tabs__tab--active	Active tab
df-tabs__tab--disabled	Disabled tab
df-tabs__panel	Tab panel