Components
Tabs
Tabs help users to navigate through content that is spread across different views. This guide explains how to use them.
This guide contains
Tabs
-
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 DHL 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
