- Guidelines
- React API Reference
- Blazor API Reference
Tab navigation components provide a way to organize and switch between different application views, offering users clear visual hierarchy and easy navigation between related pages.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use for primary navigation between related views. Ideal for organizing content into logical groups. |
| Content | Use clear, concise labels that accurately describe the content or functionality of each tab. Keep labels short and scannable. |
| Behavior | Provide clear visual indication of the active/selected tab. Support keyboard navigation and maintain consistent behavior across the application. |
| States | Clearly distinguish between active, inactive, disabled, and hover states. Ensure sufficient contrast for accessibility. |
| Hierarchy | Use tab navigation for primary sections. Avoid nesting multiple levels of tabs as it can create confusion. |
| Examples | Dashboard sections, settings categories, product details (overview, specs, reviews), or any application with distinct but related sections. |
Best Practices
- Clear Labeling: Use descriptive, concise labels that clearly indicate what content each tab contains.
- Logical Grouping: Organize tabs in a logical order based on user workflow or importance.
- Visual Hierarchy: Make the active tab clearly distinguishable from inactive tabs.
- Consistent Placement: Keep tab navigation in a consistent location throughout the application.
- Responsive Design: Ensure tabs work well on different screen sizes, consider scrollable tabs on mobile.
- Keyboard Accessibility: Support arrow key navigation between tabs and proper focus management.
Do’s and Don’ts
Do
- Use for primary navigation between related page sections. * Keep tab labels short, clear, and descriptive. * Provide clear visual indication of the active tab. * Support keyboard navigation between tabs.
Don't
- Nest multiple levels of tab navigation. * Use too many tabs that don’t fit comfortably in the available space. * Change the tab order or labels frequently as it confuses users.
Additional Guidance
- Psychological Impact:
- Mental Model: Tabs provide a familiar metaphor similar to physical file folders, making navigation intuitive.
- Context Preservation: Users maintain awareness of all available sections while focusing on the current one.
- Efficient Switching: Quick visual scanning and single-click access between related content areas.