Tabs organise and allow navigation between groups of content that are related and at the same level of hierarchy.

To select the active tab add the attribute aria-selected="true" and that list item will have the correct styling.

To horizontally align the tab list with other content, the whole tab set can be contained within a .row element to provide correct gutters.

View example of the tabs pattern


Do:Use when there are multiple categories, views or panes of content.

Tabs do

Don't:Mix tabs that contain only text, with tabs that contain icons.

Tabs don't


For more information view the tabs design spec, which includes the specification in markdown format and a PNG image.