Tabs

Tabs are used to quickly navigate between sections of the application, usually within the same context. Tab labels are concise (maximum 3 words) and describe the contents of each section.

Examples & Guidelines

Avoid designs with 6 or more horizontal tabs particularly for mobile contexts. It should be easy to remember the relative placement and order of tabs.

Horizontal Tabs
Vertical Tabs
Disabled Tabs

Nested Tabs

Vertical accordion tabs are collapsible. Multiple vertical accordion tabs can be expanded at the same time. The same is not true for default vertical tabs and their sub-tabs. Sub-tabs are only visible when a vertical tab is active. Sub-tabs can be used to quickly navigate or scroll to sections of a single page view rather than between multiple page views.

Nested Tabs