---
name: tabs
category: navigation
summary: "Tabbed navigation with roving tabindex and arrow keys"
subpath: "@42/core/tabs"
---

Tabbed navigation with `tablist`/`tab`/`tabpanel` ARIA, roving tabindex, arrow-key nav.

```html
<div data-c42-tabs>
  <div data-c42-tabs-list>
    <button data-c42-tabs-trigger data-value="a">A</button>
    <button data-c42-tabs-trigger data-value="b">B</button>
  </div>
  <div data-c42-tabs-panel data-value="a">Panel A</div>
  <div data-c42-tabs-panel data-value="b">Panel B</div>
</div>
```

```ts
import { Tabs } from '@42/core/tabs';
new Tabs(root, { orientation: 'horizontal', activationMode: 'automatic', defaultValue: 'a' });
```

Options: `orientation` ('horizontal'|'vertical'), `activationMode` ('automatic'|'manual'), `defaultValue`
Events: `tabs:change` → `{ value: string }`