Skip to main content
  • Guidelines
  • React API Reference
  • Blazor API Reference
Tabs organize content into separate views that users can navigate between without leaving the page. They allow for efficient space utilization and provide a clear way to present related but distinct sections of content.

​
Guidance

AspectBest Practice
UsageUse tabs to organize related content into distinct sections that users can easily navigate between. Ideal for presenting alternative views of similar content.
ContentKeep tab labels short and descriptive. Ensure content within each tab is cohesive and logically grouped. Avoid too many tabs (typically 2-7).
BehaviorOnly one tab should be active at a time. Switching tabs should be immediate with clear visual feedback. Maintain content state when switching tabs.
StatesClearly indicate active, hover, and disabled states. The active tab should be visually connected to its content panel.
FeedbackProvide immediate visual feedback when tabs are selected. Ensure smooth transitions between tab content when appropriate.
ExamplesForm sections, product details, settings categories, or dashboard views.

​
Best Practices

  • Descriptive Labels: Use clear, concise labels that accurately describe the tab content.
  • Visual Hierarchy: Make the active tab visually distinct and connected to its content.
  • Consistent Content Structure: Maintain similar structure across tab panels to avoid jarring changes.
  • Appropriate Number: Limit the number of tabs to avoid overwhelming users (typically 2-7 tabs).
  • Content Preservation: Preserve user input and scroll position when switching between tabs.

​
Do’s and Don’ts

Do

  • Use for content that can be clearly divided into distinct sections.
  • Keep tab labels concise and descriptive.
  • Ensure tabs are keyboard accessible.
  • Maintain a consistent structure across tab panels.

Don't

  • Use tabs for sequential processes (use a stepper instead).
  • Create too many tabs that crowd the interface.
  • Hide critical content behind tabs without clear indicators.
  • Use tabs when content needs to be compared side-by-side.

​
Additional Guidance

  • Psychological Impact:
    • Cognitive Organization: Tabs help users mentally categorize information into distinct sections.
    • Perceived Simplicity: Breaking complex interfaces into tabbed sections makes them feel more manageable.
    • Spatial Memory: Users can build a mental map of content organization through consistent tab patterns.
⌘I