Guide – Tabs | UX Design Guide

Content organization: tabs group related content into logical sections, making it easier for users to find what they need.
Space management: by hiding content until it’s needed, tabs keep interfaces cleaner and more structured, especially when there’s a lot of information to display in a limited space.
User navigation: users click on a tab to view its corresponding content and can easily switch to other tabs to see different sections.

Use tabs to organize information that is closely related and within the same context, but not sequential.
Do not create multiple levels of tabs; use other patterns like accordions or collapsible panels for second-level navigation.
Design horizontal tabs in a single row to prevent confusion and maintain a clear spatial relationship between tabs and their content.
Use concise, meaningful, and consistently styled labels to help users quickly scan and understand tab content.
Make the selected tab clearly different from inactive ones using color, bold text, or a different style to show users where they are.
Don’t hide inactive tabs; dimming or fading them is acceptable, but they should remain visible and selectable.
Aim for three to five tabs, with a maximum of six, to avoid overwhelming users and causing clutter.
Provide sufficient spacing and tap target size for tabs.

Ensure all tabs have proper keyboard support, ARIA roles, focus states, and high contrast compatibility.

Tabs