What is Tabs?

Tabs divide content into sections accessible via labeled tabs—only one section visible at a time. Users click tabs to switch between views. Keeps related content in one place without scrolling. Common for settings, profiles, dashboards. Think browser tabs or spreadsheet tabs.

When Should You Use This?

Use tabs for related content at the same hierarchy level: user profiles (Overview, Activity, Settings), product details (Description, Reviews, Specs), dashboards (Analytics, Reports, Settings). Limit to 3-7 tabs—more than that and users can't scan them. Don't nest tabs inside tabs. Always highlight active tab clearly.

Common Mistakes to Avoid

• •Too many tabs—>7 tabs and users can't see them all; use dropdown or different pattern
• •Nested tabs—tabs inside tabs is confusing; use different navigation pattern
• •Unclear active state—users should immediately see which tab is active
• •Mobile overflow—horizontal tabs overflow on mobile; use scrollable tabs or vertical stack
• •Using for sequential content—tabs are for parallel content; use stepper for sequential

Real-World Examples

• •GitHub repo—Code, Issues, Pull Requests, Actions tabs
• •Chrome/Firefox—browser tabs for parallel browsing
• •Linear issue detail—Activity, Comments, History tabs
• •Notion page settings—multiple setting categories in tabs