Tabbed interface with multiple variants: pills, steps, vertical, underline, boxed. Keyboard-navigable with ARIA support.
Basic horizontal tabs with active indicator.
Overview content appears here. This is the active default panel.
Feature content appears here after clicking the Features tab.
Pricing content appears here after clicking the Pricing tab.
<div class="antsand-tabs" data-tabs>
<div class="tabs-header">
<button class="tabs-item active" data-tab="t1">Overview</button>
<button class="tabs-item" data-tab="t2">Features</button>
</div>
<div class="tabs-content active" id="t1">...</div>
<div class="tabs-content" id="t2">...</div>
</div>Rounded pill-style tabs with gradient background.
$19/month billed monthly.
$190/year with two months included.
One-time license for long-term projects.
<div class="antsand-tabs-pills" data-tabs>
<div class="tabs-header">
<button class="tabs-item active" data-tab="m">Monthly</button>
<button class="tabs-item" data-tab="a">Annual</button>
</div>
<div class="tabs-content active" id="m">...</div>
<div class="tabs-content" id="a">...</div>
</div>Sequential workflow steps with numbered indicators.
Create your account to get started.
Add profile details and preferences.
Confirm and finish the workflow.
<div class="antsand-tabs-steps" data-tabs>
<div class="tabs-header">
<button class="tabs-item active" data-tab="s1">1. Account</button>
<button class="tabs-item" data-tab="s2">2. Profile</button>
</div>
<div class="tabs-content active" id="s1">...</div>
<div class="tabs-content" id="s2">...</div>
</div>Sidebar-style tab navigation for settings and dashboards.
General settings panel.
Security settings panel.
Billing settings panel.
<div class="antsand-tabs-vertical" data-tabs>
<div class="tabs-header">...</div>
<div class="tabs-content-wrapper">
<div class="tabs-content active" id="g">...</div>
<div class="tabs-content" id="s">...</div>
</div>
</div>Minimal tab navigation with an underline active state.
Your recent posts will appear here.
Recent comments will appear here.
Recent likes will appear here.
<div class="antsand-tabs-underline" data-tabs>
<div class="tabs-header">
<button class="tabs-item active" data-tab="p">Posts</button>
</div>
<div class="tabs-content active" id="p">...</div>
</div>Card-style tabs with bordered panels.
Product details and specifications.
Customer reviews and ratings.
Support resources and documentation.
<div class="antsand-tabs-boxed" data-tabs>
<div class="tabs-header">
<button class="tabs-item active" data-tab="d">Details</button>
</div>
<div class="tabs-content active" id="d">...</div>
</div>