tab-menu component
Drop-in semantic component. See examples, sizes, variants, and source.
Navigation tabs built from a tabs container holding
tab children, each with a label
and optional icon or badge.
Pair with tab-container + tab-content
+ tab-panel for switchable content. Behavior wiring
ships in tab-menu.js.
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
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.
Vertical Tab Container
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.
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
Class API Reference
| Type | Class | Usage | Notes |
|---|---|---|---|
| Base | tabs |
The tab list container | Always required |
tab |
An individual tab | Use data-tab="panel-id" to wire to a panel |
|
label / icon / badge / description |
Tab inner pieces | Children of tab |
|
tab-container |
Wraps tabs + content area | Add vertical for side-by-side layout |
|
tab-content |
Panel container | Holds tab-panel children |
|
tab-panel |
A single content panel | Add active on the visible one |
|
| Sizes | xs |
Tiny — compact padding/text | Modifier on tabs |
sm |
Small | Modifier on tabs |
|
| (default) | Medium | No size class needed | |
xl |
Large | Modifier on tabs |
|
lg |
Big | Modifier on tabs |
|
| Intents | primary |
Blue active indicator | Modifier on tabs |
positive |
Green active indicator | Modifier on tabs |
|
negative |
Red active indicator | Modifier on tabs |
|
warning |
Yellow active indicator | Modifier on tabs |
|
info |
Lighter-blue active indicator | Modifier on tabs |
|
purple |
Purple active indicator | Modifier on tabs |
|
| States | active |
Currently selected tab/panel | Modifier on tab or tab-panel |
disabled |
Not interactive | Modifier on tab |
|
| Layout | horizontal |
Tabs flow left to right | Default orientation |
vertical |
Tabs stack vertically (sidebar style) | Combine with list or card |
|
list |
Vertical list style | Combine with vertical |
|
card |
Vertical card style with description | Combine with vertical |
|
| Variants | pill |
Pill-shaped active background | Modifier on tabs |
segmented |
iOS-style segmented control | Modifier on tabs |
|
full-width |
Tabs stretch to fill row | Modifier on tabs |
|
bordered |
Tab strip wrapped in a border | Modifier on tabs |
|
closeable |
Tabs gain an × button | Add a close-btn child to each tab |
|
scrollable |
Adds left/right scroll arrows | Modifier on a tabs-wrapper parent |