Tabs
Calcite Tabs are simple text-based markers used for switching between parts of a workflow or interface.
Overview
Tabs are made up of two sub components: tab-item and tab-nav. Together they make a simple solution for switching views and navigating within 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
- Switching views within the interface
Sample
Best practices
Below are important guidelines on using the Tabs component.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Arrow down | Move focus to next tab. If the current focus is on first tab, the focus will cycle to the last tabs |
Arrow up | Move focus to previous tab. If the current focus is on last tab, the focus will cycle to the first tabs |
Home | Move focus to first tab |
End | Move focus to last tab |
Enter | Select tab |
Space | Select tab |
Tab | Move focus to next tab. If the currently focused tab is the last, the focus will leave the component |
Tab and Shift | Move focus to previous tab. If the currently focused tab is the first step, 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 (you're, aren't, can't, haven't) in order to reduce confusion
- Avoid writing Tab text as questions
- Recommended character maximum for each item: 20
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| bordered | bordered | Optionally enable tabs to appear like a folder-style menu when its layout is "inline" | truefalse | |
| layout | layout | Align tab titles to the edge or fully justify them across the tab nav ("center") | centerinline (default) | |
| position | position | Display the tabs above (default) or below the tab content | above (default)below | |
| scale | scale | Specify the scale of the tabs component, defaults to m | lm (default)s |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding `calcite-tab`s. |
| tab-nav | A slot for adding a tab navigation component. |