Tab

A single tab within a nana-tab-group. Place tabs in the group’s nav slot and link each to a panel via the panel attribute. The host element is the focusable tab (role="tab"), so assistive tech and the group’s roving-tabindex navigation operate on a single element.

Preview

Overview

Activity

Overview panel.

Activity panel.

<nana-tab-group variant="segmented" style="width:100%">
<nana-tab slot="nav" panel="a">Overview</nana-tab>
<nana-tab slot="nav" panel="b">Activity</nana-tab>
<nana-tab-panel name="a">Overview panel.</nana-tab-panel>
<nana-tab-panel name="b">Activity panel.</nana-tab-panel>
</nana-tab-group>

Installation

npm install @nana-tec/ui-components

Import

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

Basic usage

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

Icons & counts

Add a count badge to a tab.

Inbox

Drafts

Inbox panel.

Drafts panel.

<nana-tab-group style="width:100%">
<nana-tab slot="nav" panel="inbox" count="12">Inbox</nana-tab>
<nana-tab slot="nav" panel="drafts" count="3">Drafts</nana-tab>
<nana-tab-panel name="inbox">Inbox panel.</nana-tab-panel>
<nana-tab-panel name="drafts">Drafts panel.</nana-tab-panel>
</nana-tab-group>

Closable

Add closable to show a close button on a tab.

Overview

Settings

Overview panel.

Settings panel.

<nana-tab-group style="width:100%">
<nana-tab slot="nav" panel="a">Overview</nana-tab>
<nana-tab slot="nav" panel="settings" closable>Settings</nana-tab>
<nana-tab-panel name="a">Overview panel.</nana-tab-panel>
<nana-tab-panel name="settings">Settings panel.</nana-tab-panel>
</nana-tab-group>

API

Property	Type	Default	Description
`panel`	`string`	`''`	The name of the panel this tab controls (matches a panel’s `name`).
`active`	`boolean`	`false`	Whether the tab is the active/selected one (managed by the group).
`disabled`	`boolean`	`false`	Disable the tab.
`closable`	`boolean`	`false`	Show a close button.
`count`	`string \| number \| undefined`	`—`	Optional count shown as a small badge after the label.
`variant`	`'underline' \| 'pill' \| 'segmented' \| 'filled' \| 'ghost' \| 'card'`	`'underline'`	Visual style. Usually set automatically by the parent `nana-tab-group`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tab size. Usually set automatically by the parent `nana-tab-group`.
`tabId`	`—`	`nana-tab-${++tabIdCounter}`	Stable id used for the tab/panel aria relationship.

Events

Event	Type	Description
`nana-tab-close`	`CustomEvent`	Emitted when the tab is closed via the button or Delete / Backspace (`detail.panel`).

Slots

Slot	Description
`(default)`	The tab’s label.
`prefix`	Content before the label, typically an icon.
`suffix`	Content after the label, e.g. a count badge.

CSS Variables

Variable	Default	Description
`--nana-tab-hover-bg`	—	Hover fill for the pill, filled and ghost variants. Defaults to a translucent tint of the text colour, so it reads on any surface; set an opaque colour to pin it.
`--nana-tab-active-bg`	—	Fill of the active thumb in the segmented variant.

CSS Parts

Part	Description
`base`	The tab’s inner container
`count`	The built-in count badge
`close-button`	The close button

Storybook

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

View in Storybook

Tab