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

Overview
Details
Settings
History

Tabs with Icons

Home
Profile
Settings
Notifications

Tabs with Badges

Inbox 12
Sent
Drafts 3
Spam 99+

Tab Sizes

Tiny Size

Tab 1
Tab 2
Tab 3

Small Size

Tab 1
Tab 2
Tab 3

Default Size

Tab 1
Tab 2
Tab 3

Large Size

Tab 1
Tab 2
Tab 3

Big Size

Tab 1
Tab 2
Tab 3

Tab Colors

Primary Color

Active
Default
Another

Positive Color

Active
Default
Another

Warning Color

Active
Default
Another

Purple Color

Active
Default
Another

Vertical Tabs

Vertical List Style

Profile
Security
Notifications
Appearance
Billing

Vertical Card Style

Profile Settings
Manage your personal information
Security
Password and authentication
Notifications 5
Email and push notifications
Appearance
Theme and display settings

Vertical Tabs with Right Icons

General
Privacy
Security
Advanced

Tab Styles

Pill Style

Day
Week
Month
Year

Segmented Control

Grid
List
Card

Full Width Tabs

Tab 1
Tab 2
Tab 3

Bordered Tabs

Comments 42
History
Analytics

Tabs with Content

Tab Container with Content

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.

Vertical Tab Container

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.

Interactive Features

Closeable Tabs

Document 1
Document 2
Document 3

Scrollable Tabs

January
February
March
April
May
June
July
August
September
October
November
December

Disabled State

Enabled
Also Enabled
Disabled
Also Disabled