Skip to main content

Navigation and disclosure

Tabs

Render a named-panel disclosure pattern. It's like having multiple pages without actually leaving the page.

Curated demo

Overview content lives in named slots.

Reference

Render a named-panel disclosure pattern. It's like having multiple pages without actually leaving the page.

  • Provide stable ids for each tab/panel pair.
  • Arrow keys plus Home and End navigation are wired in for keyboard users.
  • Keep tab labels short enough to scan quickly. Don't write a sentence in a tab label.

Props

Name Type Default Description
tabs * TabItem[] — List of tab items.
defaultTab string — ID of the default active tab.
class string — Additional CSS classes.

Example snippet

<Tabs tabs={tabs} defaultTab="overview" />