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.
Sample
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.
Component comparison
Tabs, Navigation, and Stepper may look similar, but each supports a distinct type of user flow and interaction.
Best for grouping related content into separate sections.
Interactions typically switch content within same page.
Best for navigating an application.
Interactions typically take users to a different page.
Best for guiding users through processes with sequential steps
Interactions typically advance users to a next step, either within the same page or to a different page.
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
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| bordered | bordered | When true, displays the component with a folder style menu. | boolean | false |
| layout | layout | Specifies the layout of the calcite-tab-nav, justifying the calcite-tab-titles to the start ("inline"), or across and centered ("center"). | TabLayout | "inline" |
| position | position | Specifies the position of calcite-tab-nav and calcite-tab-title components in relation to the calcite-tabs. | TabPosition | "top" |
| scale | scale | Specifies the size of the component. | Scale | "m" |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding calcite-tabs. |
| title-group | A slot for adding a calcite-tab-nav. |
Styles
| Name | Description |
|---|---|
| --calcite-tab-background-color | Specifies the component's background color. |
| --calcite-tab-border-color | Specifies the component's border color. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<this> |