Automatic activation
Reveal content as focus moves
Use automatic activation when every panel is already available. Arrow keys move focus and selection together.
Key status, ownership, and delivery information in one focused view.
Twelve changes were published during the last seven days.
Eight members can view this project and three can edit it.
Selected viewOverview
Contained
Strengthen the selected state
The contained appearance works well inside settings surfaces and compact tool regions.
Manage the name, role, and image shown across your workspace.
Review authentication methods and active sessions.
Manage plan details, invoices, and payment methods.
Manual activation
Separate focus from selection
Use manual activation when changing panels may involve latency. Arrow keys move focus; Enter or Space selects the focused tab.
Current performance across the complete reporting period.
Weekly performance grouped into seven-day intervals.
Monthly performance grouped into calendar periods.
Selected reportSummary
Vertical
Support broader navigation labels
Vertical Tabs use Up and Down Arrow keys and keep their orientation at every viewport size.
Principles, identity, type, color, voice, and visual expression.
Components and patterns for consistent digital experiences.
Versioned APIs, integration guidance, and validation contracts.
Overflow and disabled
Keep one readable row
The Tab list scrolls horizontally when labels exceed its width. Disabled tabs remain visible and arrow navigation skips them.
Live activity from active visitors.
Traffic grouped by acquisition source.
Retention data is not available yet.
Lifecycle
Initialize only the region that changed
The initializer accepts a Document or Element, skips initialized groups, and returns cleanup for every listener it adds.
const cleanup = initTabs(root)nds:tabs-changecleanup()Usage guidance
Keep every view at the same level.
Use Tabs for related peers inside one context. Use navigation when each destination needs its own URL, history entry, or independent page title.
Next component: Dialog