Tabs

Usage

Tabs organise and control navigation between groups of content that are related and at the same level of hierarchy. Users can navigate between tab content by clicking one tab from a group of a minimum of two tabs.

A tab should have a text label that clearly and succinctly describes the content that will be displayed on the tab.

Behaviour

• Only one tab can be active at a time; clicking an inactive tab selects it, and selected tab cannot be clicked again

• The selected tab should be clearly represented using an appropriate component state

• Tab track should span the full width of the content container, and tab items should not exceed one row. Consider using different navigation if there are many options to represent, or use the overflow menu pattern to stack the tabs that don’t fit into one row

• When there is a danger message or error the tab will change to reflect this error to inform the user there is something wrong within the tab

Best Practices

• Use tabs to switch between two or more views of related content displayed beneath the tabs

• Use tabs when users don't need to see content from multiple tabs simultaneously

• Stack the tab options horizontally, and highlight the currently selected tab

• Don’t use tabs to display actions inside forms, to represent sequential content, or to display the main page navigation

• Avoid forcing users to jump between tabs to perform one task; the content inside tabs should not be interdependent and should allow users to complete each task under one tab

• Stick to only one row of tabs - if you need more tabs than will fit in a single row, consider simplifying your design