Tabs
- Tabs, as a navigational pattern, allow users to switch between different sections of content.
- They are used on both desktop and mobile interfaces.
- Use tabs within page sections to allow the user to toggle between different views with related content.
- Use tabs to break up large bits of content into bits the user can easily digest.
- An alternative pattern for chunking content is the use of an accordion.
- On mobile, allow the user to jump from one tab to the next by swiping.
- Use elements of style such as color to prominently highlight which tab is active.
- Keep tab labels short and plain (1 – 2 words)
- Avoid using obscure language or long phrases.
- Limit tabs to one row.
- Tabs should never wrap around to a second row.
- Keep unselected tabs visible enough for the user to know that they are still there.
- Rather than de-emphasizing the unselected tabs, highlight the one that is selected.
- Don’t use “caps lock” for tab labels. ALL CAPS ARE GENERALLY HARD TO READ. …SEE?
Version History
| Date/Time of Change | Who Made the Change | Change Details |
|---|
| May. 08 2017 5:31pm | | Initial content entry |
