Tabs

Tabbed interface for switching between content panels. Full keyboard navigation (Arrow keys, Home, End).

Default (pill style)

Preview Code

<ac-tabs>
<div class="ac-tabs__list">
  <button data-tab="overview">Overview</button>
  <button data-tab="analytics">Analytics</button>
  <button data-tab="settings">Settings</button>
</div>
<div data-panel="overview"><p>Overview content goes here.</p></div>
<div data-panel="analytics"><p>Analytics charts and data.</p></div>
<div data-panel="settings"><p>Settings and configuration.</p></div>
</ac-tabs>

Copy

Underline variant

Preview Code

<ac-tabs class="ac-tabs--underline">
<div class="ac-tabs__list">
  <button data-tab="a">Account</button>
  <button data-tab="b">Security</button>
  <button data-tab="c">Billing</button>
</div>
<div data-panel="a"><p>Account settings.</p></div>
<div data-panel="b"><p>Security settings.</p></div>
<div data-panel="c"><p>Billing information.</p></div>
</ac-tabs>

Copy

Boxed variant

Preview Code

<ac-tabs class="ac-tabs--boxed">
<div class="ac-tabs__list">
  <button data-tab="d">All</button>
  <button data-tab="e">Active</button>
  <button data-tab="f">Archived</button>
</div>
<div data-panel="d"><p>All items shown here.</p></div>
<div data-panel="e"><p>Active items only.</p></div>
<div data-panel="f"><p>Archived items.</p></div>
</ac-tabs>

Copy

JavaScript

// Listen for tab changes
document.querySelector('ac-tabs').addEventListener('ac-tab-change', (e) => {
  console.log('Active tab:', e.detail.tab); // → "overview"
});

Notes

• First tab is activated by default
• Pre-activate with .is-active on a tab button before JS initializes
• data-active attribute on <ac-tabs> reflects the current tab name
• Keyboard: ArrowLeft/Right navigate, Home/End jump to first/last