Standard Tabs

The default tab layout with horizontal arrangement. Best for general navigation between related content sections when you have 3-7 tabs that fit comfortably in the available width.

Dashboard - Overview of key metrics and recent activity

Scrollable Tabs

When you have many tabs that don't fit in the available width, scrollable tabs provide navigation arrows. This prevents text truncation and maintains readability. Best for dashboards with multiple sections or detailed navigation.

Overview - General information and status

Full Width Tabs

Tabs expand to fill the entire width of their container, distributing space evenly. Perfect for layouts where you want tabs to span the full width, typically with 2-4 tabs for optimal appearance.

Profile - Personal information and avatar settings

Vertical Tabs

Vertical orientation is ideal for sidebar navigation or when horizontal space is limited. Common in admin panels, settings pages, and detailed configuration interfaces where you need more vertical space for content.

General Settings
Basic configuration options and preferences for your account.

Icon Tabs

Enhance usability with icons that provide visual context. Icons can be used alone for compact layouts or combined with labels for better accessibility. Perfect for mobile interfaces or when space is at a premium.

Home - Main dashboard with overview information

Disabled Tabs

Some tabs can be disabled to indicate unavailable functionality or content that requires certain conditions to be met. Useful for progressive disclosure or when features depend on user permissions or subscription levels.

Basic Plan - Features available in your current plan

Colored Tabs

Customize the indicator and text colors to match your design system. Use different color combinations to create visual hierarchy or match your brand colors.

Home - Main dashboard with custom colored tabs

Controlled Tabs

Programmatically control which tab is active using external buttons or logic. Useful for wizards, multi-step forms, or when you need to control navigation flow based on user actions or validation.

Step 1 - Initial setup and configuration

Wrapped Labels Tabs

Tabs with longer labels that can wrap to multiple lines when needed. Useful when you have descriptive tab names that don't fit in a single line, while maintaining readability and accessibility.

User Management and Permissions - Manage users, roles, and access controls

Best Practices

When to Use Each Variation

  • Standard Tabs: Use for 3-7 tabs in desktop layouts with sufficient horizontal space

  • Scrollable Tabs: Use when you have 5+ tabs or limited horizontal space

  • Full Width Tabs: Use for 2-4 important tabs in wide containers

  • Vertical Tabs: Use for sidebar navigation, admin panels, or settings pages

  • Icon Tabs: Use for mobile interfaces or when space is limited

  • Disabled Tabs: Use to show unavailable features or progressive disclosure

  • Colored Tabs: Use to match brand colors or create visual hierarchy

  • Controlled Tabs: Use for wizards, multi-step forms, or programmatic navigation

  • Wrapped Labels Tabs: Use when tab labels are longer and need multiple lines

Content Organization

  • Keep tab labels concise and descriptive (1-2 words when possible)

  • Use consistent naming conventions across tabs

  • Organize tabs in logical order of importance or user workflow

  • Group related functionality within the same tab

Accessibility Guidelines

  • Ensure sufficient color contrast between active and inactive tabs

  • Use descriptive labels that work well with screen readers

  • Support keyboard navigation with arrow keys and tab key

  • Provide clear focus indicators for keyboard users

Design Considerations

  • Maintain visual hierarchy with clear active/inactive states

  • Use consistent spacing and alignment across all tabs

  • Consider mobile responsiveness when choosing tab variants

  • Test with real content to ensure tabs work with varying label lengths