Skip to content

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.

Preview

Tab

This is a tab panel.

<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

npm install @nana-tec/ui-components

Import

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

Basic usage

<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

Property	Type	Default	Description
`name`	`string`	`''`	The panel’s name (matches a tab’s `panel`).
`active`	`boolean`	`false`	Whether the panel is currently shown (managed by the group).
`panelId`	`—`	`nana-tab-panel-${++panelIdCounter}`	Stable id for the tab/panel aria relationship.

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

Storybook

Explore Tab Panel interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook