Navs & Tabs
Base Nav
Simple navigation links
Horizontal Alignment
Center and end aligned navs
Centered
End Aligned
Tabs & Pills
Tab Style
Navigation styled as tabs
With Dropdown
Pill Style
Navigation styled as pills
With Dropdown
Underline & Fill Variations
Underline Style
Nav with underline indicator
Fill & Justified
Full-width navigation
Fill
Justified
Vertical & With Icons
Vertical Navigation
Stacked vertical nav
Default
Pills
With Icons
Navigation items with icons
Tabs with Icons
Icon-Only Pills
Tabs with Content
Basic Tab Panels
Tabs that switch content panels
This is the home tab content. Welcome to our application! Here you'll find an overview of your dashboard and recent activity.
This is the profile tab content. Manage your account settings, update your personal information, and configure your preferences here.
This is the contact tab content. Get in touch with our support team or browse our FAQ section for quick answers.
Pills Tab Panels
Pills that switch content panels
Home panel content with pill navigation style. The pills provide a more modern, button-like appearance.
Profile panel content. Pills work great for horizontal and vertical layouts alike.
Contact panel content. Choose pills for a softer, more contemporary look.
Vertical Tabs
Side navigation with content panels
Home
Welcome to the home panel. This is where you can see an overview of your account activity, recent notifications, and quick actions. The vertical tab layout works great for settings pages and dashboards.
Profile
Manage your profile information here. Update your display name, avatar, bio, and other personal details. Your profile is visible to other users on the platform.
Messages
View and manage your messages. You have 3 unread messages and 12 conversations in your inbox. Use the search function to find specific messages or filter by sender.
Settings
Configure your account settings including privacy, notifications, security, and preferences. Changes are saved automatically as you make them.
Real-World Examples
Product Details Tabs
E-commerce product information
Premium wireless headphones with active noise cancellation. Experience crystal-clear audio with deep bass and crisp highs.
- 40-hour battery life
- Bluetooth 5.0 connectivity
- Foldable design for portability
| Brand | AudioMax |
| Model | AX-500 |
| Driver Size | 40mm |
| Weight | 250g |
"Great sound quality and comfortable to wear for extended periods. Highly recommended!"
Settings Navigation
Account settings tabs
Manage your general account preferences.
Configure security settings and two-factor auth.
Set up your notification preferences.
Manage billing and payment methods.