Tabs

Examples

This documentation page is an example of tabs.

Note: At the moment tabs cannot be nested.

Guidelines

What are tabs?

Tabs are UI elements that make it possible to meaningfully separate content into different sections.

When to use tabs?

Use tabs to switch between views within the same context, not to switch between totally different sections on the page (use main top navigation, horizontal nav bar or vertical nav bar for that). The content within each tab should be strongly related.

Tabs could exist at the top of the page under the main navigation but they could also be used within the body of the page to divide content into separate sections.

How to use tabs

It depends on the context, but normally it is better not to use more than 5 tabs (2-3 could be an optimal number). They should fit into a single row and tab names should be short and meaningful.

Code

Tab 1 content

Tab 2 content

Tab 3 content

Tab 4 content