Tab

Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.

Guidelines

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Tabs

Usage

Use it as a local navigation component. Each tab should contain content that is distinct from other tabs.

Behaviour

  • Desktop: When the tabs overflows (exceeds) the width of the area available, all the tabs that can't fit are grouped into a list in a fold-out modal.
  • Mobile: Only the active tab is visible. All other tabs are grouped into a list in a fold-out modal.

Do's and don'ts

Do

  • Use to navigate between groups of content.
  • Try to keep the tabs in low numbers, preferabley fewer than four.

Don't

  • Avoid using tabbed content within a tab.
  • Don't add an icon to enhance the understanding of a label.
  • Don't use tabs to toggle data or part of a form. Use Segmented Controls for this.

 

Specification

  • Size: Depends on the tab labels, but try to have all the tabs in the same size.
  • Frame: 1 px
  • Background: transparent
  • Margins to text: 16px

Styles

Tabs