Components

Tabs

Tabs help users to navigate through content that is spread across different views. This guide explains how to use them.

Usage
  • Usage
  • Examples
  • Related component
  • Download

Usage

How to use tabs

There are two different tab states: active and inactive. Whenever a tab is clicked, it is activated while all others go into an inactive state.

Horizontal vs vertical

Depending on how much content you have, you can choose whether you want to use a horizontal or vertical tab navigation.

If you’re designing for mobile and you want a vertical navigation, you have the option of using a vertically opening dropdown menu.

Emphasis

The DPDHL Group design guide offers various ways of putting emphasis on elements. If a tab navigation is important because of the content it shows, the more prominent version can be used.

Examples

Related component

Download

Sketch UI Library
ZIP
85.97 MB