Organises content into a row of tabs and matching panels, with full keyboard support, a sliding active indicator, and four placements.
First
Second
Panel one.
Panel two.
<nana-tab-group variant="segmented" style="width:100%">
<nana-tab slot="nav" panel="a">First</nana-tab>
<nana-tab slot="nav" panel="b">Second</nana-tab>
<nana-tab-panel name="a">Panel one.</nana-tab-panel>
<nana-tab-panel name="b">Panel two.</nana-tab-panel>
</nana-tab-group>
npm install @nana-tec/ui-components
import "@nana-tec/ui-components/tab-group";
<nana-tab-group style="width:100%">
<nana-tab slot="nav" panel="a">First</nana-tab>
<nana-tab slot="nav" panel="b">Second</nana-tab>
<nana-tab-panel name="a">Panel one.</nana-tab-panel>
<nana-tab-panel name="b">Panel two.</nana-tab-panel>
The variant attribute sets the tab styling — underline (default), pill,
segmented, filled, ghost, or card.
First
Second
Pill panel one.
Pill panel two.
First
Second
Segmented panel one.
Segmented panel two.
First
Second
Filled panel one.
Filled panel two.
First
Second
Card panel one.
Card panel two.
First
Second
Ghost panel one.
Ghost panel two.
<nana-tab-group variant="pill" style="width:100%">
<nana-tab slot="nav" panel="a">First</nana-tab>
<nana-tab slot="nav" panel="b">Second</nana-tab>
<nana-tab-panel name="a">Pill panel one.</nana-tab-panel>
<nana-tab-panel name="b">Pill panel two.</nana-tab-panel>
</nana-tab-group>
<nana-tab-group variant="segmented" style="width:100%">
<nana-tab slot="nav" panel="a">First</nana-tab>
<nana-tab slot="nav" panel="b">Second</nana-tab>
<nana-tab-panel name="a">Segmented panel one.</nana-tab-panel>
<nana-tab-panel name="b">Segmented panel two.</nana-tab-panel>
</nana-tab-group>
<nana-tab-group variant="filled" style="width:100%">
<nana-tab slot="nav" panel="a">First</nana-tab>
<nana-tab slot="nav" panel="b">Second</nana-tab>
<nana-tab-panel name="a">Filled panel one.</nana-tab-panel>
<nana-tab-panel name="b">Filled panel two.</nana-tab-panel>
</nana-tab-group>
<nana-tab-group variant="card" style="width:100%">
<nana-tab slot="nav" panel="a">First</nana-tab>
<nana-tab slot="nav" panel="b">Second</nana-tab>
<nana-tab-panel name="a">Card panel one.</nana-tab-panel>
<nana-tab-panel name="b">Card panel two.</nana-tab-panel>
</nana-tab-group>
<nana-tab-group variant="ghost" style="width:100%">
<nana-tab slot="nav" panel="a">First</nana-tab>
<nana-tab slot="nav" panel="b">Second</nana-tab>
<nana-tab-panel name="a">Ghost panel one.</nana-tab-panel>
<nana-tab-panel name="b">Ghost panel two.</nana-tab-panel>
</nana-tab-group>
Set placement to top (default), bottom, start, or end.
First
Second
Panel one.
Panel two.
<nana-tab-group placement="start" style="width:100%">
<nana-tab slot="nav" panel="a">First</nana-tab>
<nana-tab slot="nav" panel="b">Second</nana-tab>
<nana-tab-panel name="a">Panel one.</nana-tab-panel>
<nana-tab-panel name="b">Panel two.</nana-tab-panel>
</nana-tab-group>
| Property | Type | Default | Description |
|---|
placement | 'top' | 'bottom' | 'start' | 'end' | 'top' | Where the tabs sit relative to the panels. |
activation | 'auto' | 'manual' | 'auto' | auto activates a tab as it’s focused; manual waits for Enter / Space / click. |
variant | 'underline' | 'pill' | 'segmented' | 'filled' | 'ghost' | 'card' | 'underline' | Visual style applied to every tab in the group. |
size | 'sm' | 'md' | 'lg' | 'md' | Size applied to every tab in the group. |
noIndicator | boolean | false | Hide the sliding active indicator. |
| Event | Type | Description |
|---|
name | CustomEvent | — |
nana-tab-show | CustomEvent | Emitted when a tab is shown (detail.name). |
nana-tab-hide | CustomEvent | Emitted when a tab is hidden (detail.name). |
| Slot | Description |
|---|
nav | The nana-tab elements. |
(default) | The nana-tab-panel elements. |
| Variable | Default | Description |
|---|
--nana-tab-group-indicator-color | — | Colour of the active indicator. |
--nana-tab-group-border-color | — | Colour of the divider line. |
--nana-tab-group-track-bg | — | Segmented variant’s track fill. Defaults to a translucent tint of the text colour, so it reads on any surface; set an opaque colour to pin it. |
| Part | Description |
|---|
base | The host container |
nav | The tab navigation region |
tablist | The scrollable tab list |
indicator | The active-tab sliding indicator |
body | The panel container |
- Keyboard accessible
- Screen-reader labels
- Focus-visible states
- ARIA roles and states
- WCAG 2.2 AA contrast
Explore Tab Group interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook
