Tabs Component

Organize content into tabbed interfaces with multiple style variations

Key Principle: Universal Structure with Variant Classes

All tab variants use identical HTML structure. Only the parent container class changes to achieve different layouts:

  • antsand-tabs-pills → Pills variant (rounded, gradient backgrounds)
  • antsand-tabs-steps → Steps variant (equal-width, sequential workflow)
  • antsand-tabs-vertical → Vertical variant (sidebar navigation)
  • antsand-tabs-underline → Underline variant (minimal, bottom border)
  • antsand-tabs-boxed → Boxed variant (card-style tabs)

All variants use [data-tabs] attribute, .tabs-item buttons, and .tabs-content panels. JavaScript auto-initializes all variants.

Pills Tabs

Modern pill-style tabs with rounded backgrounds, gradient active states, and smooth transitions.

Overview

Welcome to the overview section. Pills tabs use a rounded background with centered alignment and gradient active states.

Features

Check out our amazing features. The same HTML structure works for all variants - only the parent class changes!

Pricing

View our competitive pricing plans. Notice the smooth color transitions.

Show HTML 
<div class="antsand-tabs-pills" data-tabs>
    <div class="tabs-header">
        <button class="tabs-item active" data-tab="pills-1">Overview</button>
        <button class="tabs-item" data-tab="pills-2">Features</button>
        <button class="tabs-item" data-tab="pills-3">Pricing</button>
    </div>
    <div class="tabs-content active" id="pills-1">...</div>
    <div class="tabs-content" id="pills-2">...</div>
    <div class="tabs-content" id="pills-3">...</div>
</div>

Steps Tabs

Perfect for multi-step processes and workflows. Equal-width tabs with bottom border indicators.

Step 1: Setup

Initialize your project. Steps tabs show equal-width boxes with bottom border active state.

Step 2: Configure

Configure your settings. Notice the box-shaped buttons with borders between each step.

Step 3: Deploy

Deploy your application. The structure is identical to pills, only the parent class differs!

Step 4: Launch

Go live! All tabs use equal flex distribution for consistent sizing.

Show HTML 
<div class="antsand-tabs-steps" data-tabs>
    <div class="tabs-header">
        <button class="tabs-item active" data-tab="step-1">01 Setup</button>
        <button class="tabs-item" data-tab="step-2">02 Configure</button>
        <button class="tabs-item" data-tab="step-3">03 Deploy</button>
        <button class="tabs-item" data-tab="step-4">04 Launch</button>
    </div>
    <div class="tabs-content active" id="step-1">...</div>
    <div class="tabs-content" id="step-2">...</div>
    <div class="tabs-content" id="step-3">...</div>
    <div class="tabs-content" id="step-4">...</div>
</div>

Vertical Tabs

Sidebar navigation style with side-by-side layout. Automatically becomes horizontal on mobile.

Dashboard

Your main dashboard. Vertical tabs create a side-by-side layout with the parent class handling flexbox.

Profile

Manage your profile. The tabs-header stacks vertically with a border separator.

Settings

Configure preferences. Same HTML structure as horizontal variants!

Billing

Billing information. On mobile, this becomes horizontal automatically.

Show HTML 
<div class="antsand-tabs-vertical" data-tabs>
    <div class="tabs-header">
        <button class="tabs-item active" data-tab="vertical-1">Dashboard</button>
        <button class="tabs-item" data-tab="vertical-2">Profile</button>
        <button class="tabs-item" data-tab="vertical-3">Settings</button>
        <button class="tabs-item" data-tab="vertical-4">Billing</button>
    </div>
    <div class="tabs-content-wrapper">
        <div class="tabs-content active" id="vertical-1">...</div>
        <div class="tabs-content" id="vertical-2">...</div>
        <div class="tabs-content" id="vertical-3">...</div>
        <div class="tabs-content" id="vertical-4">...</div>
    </div>
</div>

Underline Tabs

Minimal design with bottom border active state. Clean and professional.

About Us

Learn more about our company and mission. Underline tabs provide a clean, minimal interface.

Our Services

Discover what we offer. The active tab has a colored bottom border for clear visual feedback.

Get in Touch

Contact information and form. Perfect for professional websites and documentation.

Show HTML 
<div class="antsand-tabs-underline" data-tabs>
    <div class="tabs-header">
        <button class="tabs-item active" data-tab="underline-1">About</button>
        <button class="tabs-item" data-tab="underline-2">Services</button>
        <button class="tabs-item" data-tab="underline-3">Contact</button>
    </div>
    <div class="tabs-content active" id="underline-1">...</div>
    <div class="tabs-content" id="underline-2">...</div>
    <div class="tabs-content" id="underline-3">...</div>
</div>

Boxed Tabs

Card-style tabs with borders and shadow effects. Great for dashboards and admin panels.

Statistics

View your key metrics. Boxed tabs have borders and shadow effects for a card-like appearance.

Reports

Generate and view reports. Each tab looks like an individual button or card.

Analytics

Deep dive into analytics. Perfect for admin dashboards and data-heavy interfaces.

Show HTML 
<div class="antsand-tabs-boxed" data-tabs>
    <div class="tabs-header">
        <button class="tabs-item active" data-tab="boxed-1">Statistics</button>
        <button class="tabs-item" data-tab="boxed-2">Reports</button>
        <button class="tabs-item" data-tab="boxed-3">Analytics</button>
    </div>
    <div class="tabs-content active" id="boxed-1">...</div>
    <div class="tabs-content" id="boxed-2">...</div>
    <div class="tabs-content" id="boxed-3">...</div>
</div>