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.

Correct Tabs workflows
Do use Tabs to switch between workflows and interface areas.
Avoid Tabs navigation
Avoid using Tabs as page navigation.

Accessibility

Keyboard navigation

KeyFunction
Arrow rightWhen 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 leftWhen 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.
EnterWhen focused on a calcite-tab-title, selects the focused calcite-tab-title.
SpaceWhen focused on a calcite-tab-title, selects the focused calcite-tab-title.
HomeWhen focused on a calcite-tab-title, moves focus to the first calcite-tab-title.
EndWhen focused on a calcite-tab-title, moves focus to the last calcite-tab-title.
TabMoves 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 ShiftMoves 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

Correct Tabs writing
Do make Tab titles as simple as possible.
Avoid Tabs writing
Avoid using punctuation and more than 2 words for each Tab title.
  • 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

Slots

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.