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.

Show code Copy

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

Properties

Property	Attribute	Type	Default	Description
active	—	boolean	false	Whether the panel is currently shown (managed by the group).
name	—	string	''	The panel's name (matches a tab's `panel`).

Slots

Slot	Description
(default)	The panel's content.

CSS parts

Part	Description
::part(base)	The panel's host container.

CSS custom properties

Property	Description
--nana-tab-panel-padding	Padding around the panel content.

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

• Breadcrumb
• Breadcrumb Item
• Menu
• Menu Item
• Menu Label

Storybook

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

View in Storybook