Refine By

Tabs

  • Contents:
  • Tabs, as a navigational pattern, allow users to switch between different sections of content.
  • They are used on both desktop and mobile interfaces.

Guidelines

  • 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?

Accessibility

Related Elements

Related Components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
May. 08 2017 5:31pm Initial content entry