Tabs are designed to quickly navigate between views within the same context.

Design and behaviour

Tabs appear in a single, non-scrollable row, above their content. The width of each tab is dependent on its label. To ensure that all tabs appear in the container, avoid using more than seven tabs and limit labels to one or two words.

Usage and best practices

• Use tabs for alternate views within the sidenav, the aside or main content area.
• Don’t use tabs to break user interactions into a series of steps. Serial workflows are best presented in a wizard.
• Avoid using tabs in cards and modals.
• Ensure that the content in each view is independent of the content in other views.
• Don’t force users to navigate back and forth to compare data–keep such content in the same view.
• Avoid cross-linking between tabs.
• If the content within a view is broad, divide it into subsections.
• Users should not have to move between tabs in order to complete a task
• Favor nouns over verbs, for example, Settings, Permissions, and Performance.
• Use title-style caps.
• Avoid using icons in labels.