Install
Examples
Default
Slot sc-tabs into nav
and matching sc-tab-panels; active
sets the open panel by its panel / name.
Overview
Activity
Settings
A high-level summary of the project and its current status.
Recent activity, comments, and history appear here.
Configuration and preferences for this workspace.
Many tabs
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Tab 8
Content for tab 1.
Content for tab 2.
Content for tab 3.
Content for tab 4.
Content for tab 5.
Content for tab 6.
Content for tab 7.
Content for tab 8.
Disabled tab
One
Two
Three
First panel.
Second panel.
Third panel.
Manual activation
activation="manual" — arrow keys move focus,
Enter/Space selects (vs the default auto,
which selects on focus).
Account
Billing
Team
Account details.
Billing and invoices.
Team members and roles.
Bottom placement
placement="bottom" puts the nav below the panels.
Map
List
Map view of results.
List view of results.
Guidelines
Usage
switching between peer views of the same context. The
group owns selection, roving focus, and keyboard interaction
(←/→ between tabs, Home/End to the ends).
For stacked, independently-expandable sections use an
Accordion.
Do
- Use tabs for peer views of the same object, not a sequence of steps.
- Keep tab labels short — one or two words — and order them by importance.
- Always have one tab active; default to the most common view.
Don’t
- Don’t use tabs for a linear flow — use a stepper or pages.
- Don’t overflow into too many tabs; consider a Menu or sub-nav.
- Don’t put unrelated content behind tabs just to save space.
Accessibility
- Pattern: follows the WAI-ARIA Tabs pattern — a
role="tablist" of role="tab" controls, each wired to a role="tabpanel" via aria-controls / aria-labelledby.
- Selection: the active tab carries
aria-selected="true"; its panel is shown while the others are aria-hidden.
- Keyboard: roving tabindex — ←/→ move between tabs, Home/End jump to the ends; in
manual mode Enter/Space activates.
- Disabled: a
disabled tab sets aria-disabled and is skipped.
- Panel focus: each panel is focusable (
tabindex="0") so keyboard users can reach its content.
Properties
Related
- Accordion — stacked, independently-expandable sections.
- Menu — for navigation that doesn’t fit in a tab strip.
- Page Controls — step position within a sequence.