# Tab Panel

> Source: https://design.nanatec.co.ke/components/tab-panel/
> A content panel controlled by a `nana-tab` inside a `nana-tab-group`. Following the WAI-ARIA tabs pattern, the panel is only made focusable (`tabindex="0"`) when it contains no focusable content of its own, so keyboard users always have a way to reach the panel without an extra stop.

A content panel controlled by a `nana-tab` inside a `nana-tab-group`. Following the WAI-ARIA tabs pattern, the panel is only made focusable (`tabindex="0"`) when it contains no focusable content of its own, so keyboard users always have a way to reach the panel without an extra stop.

## Preview

```html
<nana-tab-group style="width:100%">
  <nana-tab slot="nav" panel="a">Tab</nana-tab>
  <nana-tab-panel name="a">This is a tab panel.</nana-tab-panel>
</nana-tab-group>
```

## Installation

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

## Import

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

## Basic usage

```html
<nana-tab-group style="width:100%">
  <nana-tab slot="nav" panel="a">Tab</nana-tab>
  <nana-tab-panel name="a">This is a tab panel.</nana-tab-panel>
</nana-tab-group>
```

## API

## Slots

| Slot | Description |
|---|---|
| `(default)` | The panel's content. |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-tab-panel-padding` | — | Padding around the panel content. |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The panel's host container |

## 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-panel--docs