Tabs
Tabs are text-based markers used for switching between parts of a workflow or interface.
Overview
Tabs are made up of three sub components: Tab, Tab Nav, and Tab Title. Together they provide a solution to switch views and navigate between parts of the interface. Tabs can contain supportive icons, and have different layouts and positions to fill many interface needs. Tabs should not be used as top-level navigation.
Usage
- Organize related information into categories to reduce cognitive load.
- Tabs should contain at least two items, and one selected Tab Title at a time.
Sample
Best practices
Below are important guidelines on using the Tabs component.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Arrow right | When focused on a calcite-tab-title, moves focus to the next calcite-tab-title. If the current focus is on first calcite-tab-title, the focus will cycle to the last calcite-tab-title. |
Arrow left | When focused on a calcite-tab-title, moves focus to the previous calcite-tab-title. If the current focus is on last calcite-tab-title, the focus will cycle to the first calcite-tab-title. |
Enter | When focused on a calcite-tab-title, selects the focused calcite-tab-title. |
Space | When focused on a calcite-tab-title, selects the focused calcite-tab-title. |
Home | When focused on a calcite-tab-title, moves focus to the first calcite-tab-title. |
End | When focused on a calcite-tab-title, moves focus to the last calcite-tab-title. |
Tab | Moves focus to the selected calcite-tab. If the calcite-tab is focused, moves focus to the calcite-tab contents. If the calcite-tab contents are focused, the focus will leave the component. |
Tab and Shift | Moves focus to the selected calcite-tab. If the calcite-tab is focused, moves focus to the calcite-tab-title. If the calcite-tab-title is focused, the focus will leave the component. |
Writing and copy
- Keep text in Tabs short and succinct
- Avoid using more than 1-2 words in each item
- Do not use punctuation like commas, or periods in Tabs
- Do not use contractions such as "you're", "aren't", "can't", and "haven't" to reduce confusion
- Avoid writing text as questions
- Recommended character maximum for each item: 20