# Tab Group

> Source: https://design.nanatec.co.ke/components/tab-group/
> Organises content into a row of tabs and matching panels, with full keyboard support, a sliding active indicator, and four placements.

Organises content into a row of tabs and matching panels, with full keyboard support, a sliding active indicator, and four placements.

## Preview

```html
<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>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/tab-group";
```

## Basic usage

```html
<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>
</nana-tab-group>
```

## Variants

The `variant` attribute sets the tab styling — `underline` (default), `pill`,
`segmented`, `filled`, `ghost`, or `card`.

```html
<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>
```

## Placement

Set `placement` to `top` (default), `bottom`, `start`, or `end`.

```html
<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>
```

## API

## Events

| 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`). |

## Slots

| Slot | Description |
|---|---|
| `nav` | The `nana-tab` elements. |
| `(default)` | The `nana-tab-panel` elements. |

## CSS Variables

| 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. |

## CSS Parts

| 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 |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/breadcrumb/">Breadcrumb</a></li>
  <li><a href="/components/breadcrumb-item/">Breadcrumb Item</a></li>
  <li><a href="/components/menu/">Menu</a></li>
  <li><a href="/components/menu-item/">Menu Item</a></li>
  <li><a href="/components/menu-label/">Menu Label</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-tab-group--docs