Tabs

Tabs are used to quickly navigate between views within the same context.

Specifications

  • Tabs should always be placed on top of the content they represent.
  • Tabs differ from primary forms of navigation, such as Navbars, in that they are considered to be related to each other (i.e. types of media, genres of music, etc…)
  • Users shouldn’t need to simultaneously see content from multiple tabs.
  • The currently selected tab should be appropriately highlighted.
  • Always have one tab pre-selected.
  • Tabs should be easy to scan and thus should have short, meaningful labels or icons. Avoid long text labels that don’t truncate or wrap.
  • Labels should either be all text or all icons, not both intermixed.
  • Avoid nesting tabs.
  • Make unselected tabs visible to avoid potentially hiding features/content from the user.
  • Maintain consistency by not removing tabs when their function is unavailable. Instead offer an explanation as to why a tab’s content is unavailable and present the user with an action to remedy it.
  • Always arrange tabs in an order that makes sense for the user.

Behaviors

  • Try to organize tabs so that the most relevant, pre-selected tab is also the leftmost tab.
  • When clicked, tabs should transition between views and highlight the selected tab.
  • Disabled tabs should have a reduced opacity, not have hover styles, and not be interactive.
  • Tab content should not disrupt the overall page layout in ways that negatively impact user experience.
  • At a smaller screen size, the tabs collapse into a dropdown.

Editorial

  • Tab labels should be in all uppercase.
  • Avoid tab labels that contain more than 2 words.
  • Avoid truncating tab labels.