navigation / stable

Tabs

Section navigation with panels: nest Tab elements in a labelled TabList and matching TabPanel ids. Initialize defaultSelectedKey or control selectedKey/onSelectionChange.

LIVE PREVIEW

Loading preview…

When to use

Up to ~7 primary sections; the rest go in More.
Sections of one object that each have their own content (Overview / Activity / Files) — tabs own a tabpanel.
Use variant="secondary" for second-level navigation beneath primary tabs, such as a month or sub-section switch.
Use TabList overflow items for secondary sections when more than seven choices cannot fit.

Consider an alternative

Never use the secondary variant as the only tab row.
Choosing how the same data is presented (Board / List, Day / Week / Month) with no panels — use SegmentedControl.
Navigating between unrelated pages — use the sidebar or links.
On/off settings — use Switch.

Import

import { Tabs } from '@revido-llc/kit';

Keyboard interaction

ArrowLeft / ArrowRight — move and select
Home / End — first / last tab
Enter / Space / ArrowDown on More — open the menu
Escape in More — close and return focus
Tab — into the panel

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


className	string	—
size	TabsSize	"md"	`md` (default) is 32px tall like a control; `sm` 28px for toolbars and panels.
variant	"primary" \| "secondary"	"primary"	`secondary` is second-level navigation beneath primary tabs; never the only tab row.
children	ChildrenOrFunction<TabsRenderProps>	—	The children of the component. A function may be provided to alter the children based on component state.
disabledKeys	Iterable<Key>	—	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
keyboardActivation	"automatic" \| "manual"	'automatic'	Whether tabs are activated automatically on focus or manually.
render	DOMRenderFunction<"div", TabsRenderProps>	—	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Related exports

TabList, Tab, TabPanel

Examples

Secondary navigation

A quiet month switch beneath primary section tabs. Never use secondary as the only tab row.

<Tabs defaultSelectedKey="month-close">
  <TabList aria-label="Finance sections">
    <Tab id="summary">Summary</Tab>
    <Tab id="month-close">Month close</Tab>
  </TabList>
  <TabPanel id="summary">Finance summary.</TabPanel>
  <TabPanel id="month-close">
    <Tabs variant="secondary" defaultSelectedKey="september">
      <TabList aria-label="Month close period">
        <Tab id="september">September</Tab>
        <Tab id="october">October</Tab>
      </TabList>
      <TabPanel id="september">September close.</TabPanel>
      <TabPanel id="october">October close.</TabPanel>
    </Tabs>
  </TabPanel>
</Tabs>

With overflow

More shares the segmented track and displays the active secondary section. The narrow example automatically moves trailing sections into its menu; the selected primary tab stays visible.

<Tabs defaultSelectedKey="overview">
  <TabList aria-label="Project sections" overflow={{ items: [
    { id: "triage", label: "Triage", leading: { kind: "icon", icon: <Inbox /> } },
    { id: "updates", label: "Updates", leading: { kind: "icon", icon: <Bell /> }, badge: true },
  ] }}>
    <Tab id="overview">Overview</Tab>
    <Tab id="issues">Issues</Tab>
    <Tab id="team">Team</Tab>
  </TabList>
  <TabPanel id="triage">…</TabPanel>
</Tabs>

With panels

<Tabs defaultSelectedKey="overview">
  <TabList aria-label="Deal">
    <Tab id="overview">Overview</Tab>
    <Tab id="activity">Activity</Tab>
  </TabList>
  <TabPanel id="overview">…</TabPanel>
  <TabPanel id="activity">…</TabPanel>
</Tabs>

Sizes and icons

md matches a 32px control; sm (28px) for toolbars.

<Tabs size="sm" selectedKey={layout} onSelectionChange={setLayout}>
  <TabList aria-label="Layout">
    <Tab id="list"><List /> List</Tab>
    <Tab id="board"><LayoutGrid /> Board</Tab>
  </TabList>
</Tabs>