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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

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 downMove focus to next tab. If the current focus is on first tab, the focus will cycle to the last tabs
Arrow upMove focus to previous tab. If the current focus is on last tab, the focus will cycle to the first tabs
HomeMove focus to first tab
EndMove focus to last tab
EnterSelect tab
SpaceSelect tab
TabMove focus to next tab. If the currently focused tab is the last, the focus will leave the component
Tab and ShiftMove focus to previous tab. If the currently focused tab is the first step, 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 (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

calcite-tabs
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
borderedbordered

Optionally enable tabs to appear like a folder-style menu when its layout is "inline"

booleanA boolean property should be present, or not
truefalse
layoutlayout

Align tab titles to the edge or fully justify them across the tab nav ("center")

typedChoose from a set of typed values
centerinline (default)
positionposition

Display the tabs above (default) or below the tab content

typedChoose from a set of typed values
above (default)below
scalescale

Specify the scale of the tabs component, defaults to m

typedChoose from a set of typed values
lm (default)s

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-tab`s.

tab-nav

A slot for adding a tab navigation component.

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