BlueStack.io - Component Library

tab-menu Component

Tab Menu

Tab menus provide navigation between related content sections. They support horizontal and vertical layouts with various styles and interactive states.

Basic Horizontal Tabs

Preview Code

Copy

Overview

Details

Settings

History

<div class="tabs horizontal">
  <div class="tab active">
    <span class="label">Overview</span>
  </div>
  <div class="tab">
    <span class="label">Details</span>
  </div>
  <div class="tab">
    <span class="label">Settings</span>
  </div>
  <div class="tab">
    <span class="label">History</span>
  </div>
</div>

Tabs with Icons

Preview Code

Copy

Home

Profile

Settings

Notifications

<div class="tabs horizontal">
  <div class="tab active">
    <i class="icon home w-4 h-4"></i>
    <span class="label">Home</span>
  </div>
  <div class="tab">
    <i class="icon user w-4 h-4"></i>
    <span class="label">Profile</span>
  </div>
  <div class="tab">
    <i class="icon settings w-4 h-4"></i>
    <span class="label">Settings</span>
  </div>
  <div class="tab">
    <i class="icon bell w-4 h-4"></i>
    <span class="label">Notifications</span>
  </div>
</div>

Tabs with Badges

Preview Code

Copy

Inbox 12

Sent

Drafts 3

Spam 99+

<div class="tabs horizontal">
  <div class="tab active">
    <span class="label">Inbox</span>
    <span class="badge">12</span>
  </div>
  <div class="tab">
    <span class="label">Sent</span>
  </div>
  <div class="tab">
    <span class="label">Drafts</span>
    <span class="badge">3</span>
  </div>
  <div class="tab">
    <span class="label">Spam</span>
    <span class="badge warning">99+</span>
  </div>
</div>

Tab Sizes

Tiny Size

Preview Code

Copy

Tab 1

Tab 2

Tab 3

<div class="tabs horizontal tiny">
  <div class="tab active">
    <span class="label">Tab 1</span>
  </div>
  <div class="tab">
    <span class="label">Tab 2</span>
  </div>
  <div class="tab">
    <span class="label">Tab 3</span>
  </div>
</div>

Small Size

Preview Code

Copy

Tab 1

Tab 2

Tab 3

<div class="tabs horizontal small">
  <div class="tab active">
    <span class="label">Tab 1</span>
  </div>
  <div class="tab">
    <span class="label">Tab 2</span>
  </div>
  <div class="tab">
    <span class="label">Tab 3</span>
  </div>
</div>

Default Size

Preview Code

Copy

Tab 1

Tab 2

Tab 3

<div class="tabs horizontal">
  <div class="tab active">
    <span class="label">Tab 1</span>
  </div>
  <div class="tab">
    <span class="label">Tab 2</span>
  </div>
  <div class="tab">
    <span class="label">Tab 3</span>
  </div>
</div>

Large Size

Preview Code

Copy

Tab 1

Tab 2

Tab 3

<div class="tabs horizontal large">
  <div class="tab active">
    <span class="label">Tab 1</span>
  </div>
  <div class="tab">
    <span class="label">Tab 2</span>
  </div>
  <div class="tab">
    <span class="label">Tab 3</span>
  </div>
</div>

Big Size

Preview Code

Copy

Tab 1

Tab 2

Tab 3

<div class="tabs horizontal big">
  <div class="tab active">
    <span class="label">Tab 1</span>
  </div>
  <div class="tab">
    <span class="label">Tab 2</span>
  </div>
  <div class="tab">
    <span class="label">Tab 3</span>
  </div>
</div>

Tab Colors

Primary Color

Preview Code

Copy

Active

Default

Another

<div class="tabs horizontal primary">
  <div class="tab active">
    <span class="label">Active</span>
  </div>
  <div class="tab">
    <span class="label">Default</span>
  </div>
  <div class="tab">
    <span class="label">Another</span>
  </div>
</div>

Positive Color

Preview Code

Copy

Active

Default

Another

<div class="tabs horizontal positive">
  <div class="tab active">
    <span class="label">Active</span>
  </div>
  <div class="tab">
    <span class="label">Default</span>
  </div>
  <div class="tab">
    <span class="label">Another</span>
  </div>
</div>

Warning Color

Preview Code

Copy

Active

Default

Another

<div class="tabs horizontal warning">
  <div class="tab active">
    <span class="label">Active</span>
  </div>
  <div class="tab">
    <span class="label">Default</span>
  </div>
  <div class="tab">
    <span class="label">Another</span>
  </div>
</div>

Purple Color

Preview Code

Copy

Active

Default

Another

<div class="tabs horizontal purple">
  <div class="tab active">
    <span class="label">Active</span>
  </div>
  <div class="tab">
    <span class="label">Default</span>
  </div>
  <div class="tab">
    <span class="label">Another</span>
  </div>
</div>

Vertical Tabs

Vertical List Style

Preview Code

Copy

Profile

Security

Notifications

Appearance

Billing

<div class="tabs vertical list">
  <div class="tab active">
    <i class="icon user w-4 h-4"></i>
    <span class="label">Profile</span>
  </div>
  <div class="tab">
    <i class="icon shield w-4 h-4"></i>
    <span class="label">Security</span>
  </div>
  <div class="tab">
    <i class="icon bell w-4 h-4"></i>
    <span class="label">Notifications</span>
  </div>
  <div class="tab">
    <i class="icon palette w-4 h-4"></i>
    <span class="label">Appearance</span>
  </div>
  <div class="tab">
    <i class="icon credit-card w-4 h-4"></i>
    <span class="label">Billing</span>
  </div>
</div>

Vertical Card Style

Preview Code

Copy

Profile Settings

Manage your personal information

Security

Password and authentication

Notifications 5

Email and push notifications

Appearance

Theme and display settings

<div class="tabs vertical card">
  <div class="tab active">
    <div class="tab-header">
      <i class="icon user w-5 h-5"></i>
      <span class="label">Profile Settings</span>
    </div>
    <span class="description">Manage your personal information</span>
  </div>
  <div class="tab">
    <div class="tab-header">
      <i class="icon shield w-5 h-5"></i>
      <span class="label">Security</span>
    </div>
    <span class="description">Password and authentication</span>
  </div>
  <div class="tab">
    <div class="tab-header">
      <i class="icon bell w-5 h-5"></i>
      <span class="label">Notifications</span>
      <span class="badge">5</span>
    </div>
    <span class="description">Email and push notifications</span>
  </div>
  <div class="tab">
    <div class="tab-header">
      <i class="icon palette w-5 h-5"></i>
      <span class="label">Appearance</span>
    </div>
    <span class="description">Theme and display settings</span>
  </div>
</div>

<div class="tabs vertical card">
                <div class="tab active">
                    <div class="tab-header">
                        <i class="icon user w-5 h-5"></i>
                        <span class="label">Profile Settings</span>
                    </div>
                    <span class="description">Manage your personal information</span>
                </div>
                <div class="tab">
                    <div class="tab-header">
                        <i class="icon shield w-5 h-5"></i>
                        <span class="label">Security</span>
                    </div>
                    <span class="description">Password and authentication</span>
                </div>
                <div class="tab">
                    <div class="tab-header">
                        <i class="icon bell w-5 h-5"></i>
                        <span class="label">Notifications</span>
                        <span class="badge">5</span>
                    </div>
                    <span class="description">Email and push notifications</span>
                </div>
                <div class="tab">
                    <div class="tab-header">
                        <i class="icon palette w-5 h-5"></i>
                        <span class="label">Appearance</span>
                    </div>
                    <span class="description">Theme and display settings</span>
                </div>
            </div>

Vertical Tabs with Right Icons

Preview Code

Copy

General

Privacy

Security

Advanced

<div class="tabs vertical list">
  <div class="tab active">
    <span class="label">General</span>
    <i class="icon chevron-right w-4 h-4 ml-auto"></i>
  </div>
  <div class="tab">
    <span class="label">Privacy</span>
    <i class="icon chevron-right w-4 h-4 ml-auto"></i>
  </div>
  <div class="tab">
    <span class="label">Security</span>
    <i class="icon chevron-right w-4 h-4 ml-auto"></i>
  </div>
  <div class="tab">
    <span class="label">Advanced</span>
    <i class="icon chevron-right w-4 h-4 ml-auto"></i>
  </div>
</div>

Tab Styles

Pill Style

Preview Code

Copy

Day

Week

Month

Year

<div class="tabs horizontal pill">
  <div class="tab active">
    <span class="label">Day</span>
  </div>
  <div class="tab">
    <span class="label">Week</span>
  </div>
  <div class="tab">
    <span class="label">Month</span>
  </div>
  <div class="tab">
    <span class="label">Year</span>
  </div>
</div>

Segmented Control

Preview Code

Copy

Grid

List

Card

<div class="tabs horizontal segmented">
  <div class="tab active">
    <span class="label">Grid</span>
  </div>
  <div class="tab">
    <span class="label">List</span>
  </div>
  <div class="tab">
    <span class="label">Card</span>
  </div>
</div>

Full Width Tabs

Preview Code

Copy

Tab 1

Tab 2

Tab 3

<div class="tabs horizontal full-width">
  <div class="tab active">
    <span class="label">Tab 1</span>
  </div>
  <div class="tab">
    <span class="label">Tab 2</span>
  </div>
  <div class="tab">
    <span class="label">Tab 3</span>
  </div>
</div>

Bordered Tabs

Preview Code

Copy

Comments 42

History

Analytics

<div class="tabs horizontal bordered">
  <div class="tab active">
    <span class="label">Comments</span>
    <span class="badge">42</span>
  </div>
  <div class="tab">
    <span class="label">History</span>
  </div>
  <div class="tab">
    <span class="label">Analytics</span>
  </div>
</div>

Tabs with Content

Tab Container with Content

Preview Code

Copy

Profile

Settings

Activity

Profile Information

This is the profile panel content. Update your personal information and preferences here.

Account Settings

Manage your account settings and preferences.

Recent Activity

View your recent activity and history.

<div class="tab-container">
  <div class="tabs horizontal" role="tablist">
    <div class="tab active" role="tab" data-tab="panel1">
      <span class="label">Profile</span>
    </div>
    <div class="tab" role="tab" data-tab="panel2">
      <span class="label">Settings</span>
    </div>
    <div class="tab" role="tab" data-tab="panel3">
      <span class="label">Activity</span>
    </div>
  </div>
  <div class="tab-content">
    <div class="tab-panel active" id="panel1" role="tabpanel">
      <h3 class="text-lg font-semibold mb-4">Profile Information</h3>
      <p class="text-gray-600">
        This is the profile panel content. Update your personal information and preferences here.
      </p>
    </div>
    <div class="tab-panel" id="panel2" role="tabpanel">
      <h3 class="text-lg font-semibold mb-4">Account Settings</h3>
      <p class="text-gray-600">Manage your account settings and preferences.</p>
    </div>
    <div class="tab-panel" id="panel3" role="tabpanel">
      <h3 class="text-lg font-semibold mb-4">Recent Activity</h3>
      <p class="text-gray-600">View your recent activity and history.</p>
    </div>
  </div>
</div>

<div class="tab-container">
                <div class="tabs horizontal" role="tablist">
                    <div class="tab active" role="tab" data-tab="panel1">
                        <span class="label">Profile</span>
                    </div>
                    <div class="tab" role="tab" data-tab="panel2">
                        <span class="label">Settings</span>
                    </div>
                    <div class="tab" role="tab" data-tab="panel3">
                        <span class="label">Activity</span>
                    </div>
                </div>
                <div class="tab-content">
                    <div class="tab-panel active" id="panel1" role="tabpanel">
                        <h3 class="text-lg font-semibold mb-4">Profile Information</h3>
                        <p class="text-gray-600">This is the profile panel content. Update your personal information and preferences here.</p>
                    </div>
                    <div class="tab-panel" id="panel2" role="tabpanel">
                        <h3 class="text-lg font-semibold mb-4">Account Settings</h3>
                        <p class="text-gray-600">Manage your account settings and preferences.</p>
                    </div>
                    <div class="tab-panel" id="panel3" role="tabpanel">
                        <h3 class="text-lg font-semibold mb-4">Recent Activity</h3>
                        <p class="text-gray-600">View your recent activity and history.</p>
                    </div>
                </div>
            </div>

Vertical Tab Container

Preview Code

Copy

Dashboard

Team

Projects

Dashboard Overview

Welcome to your dashboard. View key metrics and recent activity.

Team Members

Manage your team and collaborate with colleagues.

Your Projects

View and manage all your projects in one place.

<div class="tab-container vertical">
  <div class="tabs vertical list" role="tablist">
    <div class="tab active" role="tab" data-tab="vpanel1">
      <i class="icon layout-grid w-4 h-4"></i>
      <span class="label">Dashboard</span>
    </div>
    <div class="tab" role="tab" data-tab="vpanel2">
      <i class="icon users w-4 h-4"></i>
      <span class="label">Team</span>
    </div>
    <div class="tab" role="tab" data-tab="vpanel3">
      <i class="icon folder w-4 h-4"></i>
      <span class="label">Projects</span>
    </div>
  </div>
  <div class="tab-content">
    <div class="tab-panel active" id="vpanel1" role="tabpanel">
      <h3 class="text-lg font-semibold mb-4">Dashboard Overview</h3>
      <p class="text-gray-600">Welcome to your dashboard. View key metrics and recent activity.</p>
    </div>
    <div class="tab-panel" id="vpanel2" role="tabpanel">
      <h3 class="text-lg font-semibold mb-4">Team Members</h3>
      <p class="text-gray-600">Manage your team and collaborate with colleagues.</p>
    </div>
    <div class="tab-panel" id="vpanel3" role="tabpanel">
      <h3 class="text-lg font-semibold mb-4">Your Projects</h3>
      <p class="text-gray-600">View and manage all your projects in one place.</p>
    </div>
  </div>
</div>

<div class="tab-container vertical">
                <div class="tabs vertical list" role="tablist">
                    <div class="tab active" role="tab" data-tab="vpanel1">
                        <i class="icon layout-grid w-4 h-4"></i>
                        <span class="label">Dashboard</span>
                    </div>
                    <div class="tab" role="tab" data-tab="vpanel2">
                        <i class="icon users w-4 h-4"></i>
                        <span class="label">Team</span>
                    </div>
                    <div class="tab" role="tab" data-tab="vpanel3">
                        <i class="icon folder w-4 h-4"></i>
                        <span class="label">Projects</span>
                    </div>
                </div>
                <div class="tab-content">
                    <div class="tab-panel active" id="vpanel1" role="tabpanel">
                        <h3 class="text-lg font-semibold mb-4">Dashboard Overview</h3>
                        <p class="text-gray-600">Welcome to your dashboard. View key metrics and recent activity.</p>
                    </div>
                    <div class="tab-panel" id="vpanel2" role="tabpanel">
                        <h3 class="text-lg font-semibold mb-4">Team Members</h3>
                        <p class="text-gray-600">Manage your team and collaborate with colleagues.</p>
                    </div>
                    <div class="tab-panel" id="vpanel3" role="tabpanel">
                        <h3 class="text-lg font-semibold mb-4">Your Projects</h3>
                        <p class="text-gray-600">View and manage all your projects in one place.</p>
                    </div>
                </div>
            </div>

Interactive Features

Closeable Tabs

Preview Code

Copy

Document 1

Document 2

Document 3

<div class="tabs horizontal closeable">
  <div class="tab active">
    <span class="label">Document 1</span>
    <button class="close-btn" aria-label="Close tab">
      <i class="icon x w-3 h-3"></i>
    </button>
  </div>
  <div class="tab">
    <span class="label">Document 2</span>
    <button class="close-btn" aria-label="Close tab">
      <i class="icon x w-3 h-3"></i>
    </button>
  </div>
  <div class="tab">
    <span class="label">Document 3</span>
    <button class="close-btn" aria-label="Close tab">
      <i class="icon x w-3 h-3"></i>
    </button>
  </div>
  <button class="tab add-tab">
    <i class="icon plus w-4 h-4"></i>
  </button>
</div>

Scrollable Tabs

Preview Code

Copy

January

February

March

April

May

June

July

August

September

October

November

December

<div class="tabs-wrapper scrollable">
  <button class="scroll-btn left" aria-label="Scroll left">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <div class="tabs horizontal">
    <div class="tab active">
      <span class="label">January</span>
    </div>
    <div class="tab">
      <span class="label">February</span>
    </div>
    <div class="tab">
      <span class="label">March</span>
    </div>
    <div class="tab">
      <span class="label">April</span>
    </div>
    <div class="tab">
      <span class="label">May</span>
    </div>
    <div class="tab">
      <span class="label">June</span>
    </div>
    <div class="tab">
      <span class="label">July</span>
    </div>
    <div class="tab">
      <span class="label">August</span>
    </div>
    <div class="tab">
      <span class="label">September</span>
    </div>
    <div class="tab">
      <span class="label">October</span>
    </div>
    <div class="tab">
      <span class="label">November</span>
    </div>
    <div class="tab">
      <span class="label">December</span>
    </div>
  </div>
  <button class="scroll-btn right" aria-label="Scroll right">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

<div class="tabs-wrapper scrollable">
                <button class="scroll-btn left" aria-label="Scroll left">
                    <i class="icon chevron-left w-4 h-4"></i>
                </button>
                <div class="tabs horizontal">
                    <div class="tab active">
                        <span class="label">January</span>
                    </div>
                    <div class="tab">
                        <span class="label">February</span>
                    </div>
                    <div class="tab">
                        <span class="label">March</span>
                    </div>
                    <div class="tab">
                        <span class="label">April</span>
                    </div>
                    <div class="tab">
                        <span class="label">May</span>
                    </div>
                    <div class="tab">
                        <span class="label">June</span>
                    </div>
                    <div class="tab">
                        <span class="label">July</span>
                    </div>
                    <div class="tab">
                        <span class="label">August</span>
                    </div>
                    <div class="tab">
                        <span class="label">September</span>
                    </div>
                    <div class="tab">
                        <span class="label">October</span>
                    </div>
                    <div class="tab">
                        <span class="label">November</span>
                    </div>
                    <div class="tab">
                        <span class="label">December</span>
                    </div>
                </div>
                <button class="scroll-btn right" aria-label="Scroll right">
                    <i class="icon chevron-right w-4 h-4"></i>
                </button>
            </div>

Disabled State

Preview Code

Copy

Enabled

Also Enabled

Disabled

Also Disabled

<div class="tabs horizontal">
  <div class="tab active">
    <span class="label">Enabled</span>
  </div>
  <div class="tab">
    <span class="label">Also Enabled</span>
  </div>
  <div class="tab disabled">
    <span class="label">Disabled</span>
  </div>
  <div class="tab disabled">
    <span class="label">Also Disabled</span>
  </div>
</div>