Tab

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

 

Short description

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

When and how to use it

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

If there are only two tabs, size them both 50% of the width.

When there are more tabs, use the same behaviour as for desktop. When the tabs overflows the width, present the active tab and group all others 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
  • Margins to text: 16px

Styles