Tabs
Tabs organise related content across different views to be quickly navigated.
When to Use
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.
Structure
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.
Tab labels should provide clear and concise direction. If the label is longer than the maximum width it will be truncated and should have a tooltip provided.
Guidelines
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.
info
To navigate using the keyboard use:
- TAB to move from tab to tab panel.
- SHIFT + TAB to go backwards.
- LEFT / RIGHT ARROW to move from between tabs (active tab must be focused).
Implementation in Figma
- In Figma go to the Assets Panel and search for tabs.
- Drag and drop the component in your frame.
- Rename and resize the component if needed.
- Choose the variant from the Design Panel.