Skip to content
search icon
Component Status

Navigation tabs

Tabs organise related content across different views to be quickly navigated.


Tabs allow for navigation between content that is related and has an equal hierarchy. Each tab's content should be noticeably different from the other. Tabs allow for information to be presented in a space-saving layout.


  • Do not use tabs to scroll down through long pages on sequential content.
  • Do not stretch a tab to be wider than 360px.
  • Do not wrap or stack tabs.
  • Do not change the height of the tabs.
  • Do not use less than two tabs.
  • Do not use tabs above imagery.
  • Do not use tabs at the bottom of a layout.
  • Do not nest a set of Tabs within another set of Tabs.



FigmaExternal linkFigma design sketches active tab


FigmaExternal linkFigma design sketches inactive tab


FigmaExternal linkFigma design sketches of disabled tab


Tabs have a minimum width of Spacer/16 - Medium on each side of the label. Tabs have a maximum width of 360px.

Tab width can be decided by three factors:

  1. The width of the space available being equally divided by the number of tabs. This method is only to be used for four tabs or less.
  2. The width of the widest tab determining the width of all the tabs to provide visual balance. This should be used with caution ensuring all tabs will be seen in smaller layouts.
  3. Each tab having its own minimum width to conserve space.

Horizontal scrolling tabs

Tabs that are wider than the space available are always swipeable/scrollable having a next and previous icon button for navigation.



Tab labels should provide clear and concise direction. Note that if the label is longer than the maximum width it will be truncated and should have a tooltip provided.


If the Navigation: Navigation Drawer is not used, tabs may be used in the Navigation: Top Bar as the main navigation linking to unrelated pages.


Tab states

Tab widths (min and full)

Tabs with panels

To navigate using they keyboard, use tab key to move from tab to tab panel, shift + tab to go backwards, use left and right arrow keys to move from between tabs (active tab must be focused). Focus outline is only visible when navigating using the keyboard.

Panel two

Tabs and search

search icon
Panel one
Edit this page on GitHub