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.
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:
- 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.
- 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.
- 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.
Navigation: Navigation Drawer is not used, tabs may be used in the
Navigation: Top Bar as the main navigation linking to unrelated pages.
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.