Tabs
Components
Tabs are navigation elements that organize and separate content into different sections within the same view. They allow users to switch between related content, maintaining context while reducing clutter.
Checklist
Reset
Labels
Name of each tab
Label should be logical enough for the user to predict what's in the tab
Keep it concise, ideally 1 word
Content area
Where the content for the active tab is displayed
Typically underneath a horizontal tab, or to the right of a vertical tab
Style
How the active tab and inactive tabs differentiate visually, as well as the tab container overall
Item order
Consider the arrangement of tabs to be ordered by popularity or familiarity
States
Default, active, hover are the key states
