Skip to content
Nana UI

Tab

View .md Download

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

Section titled “Preview”
Overview Activity Overview panel. Activity panel.

Installation

Section titled “Installation”
Terminal window
npm install @nana-tec/ui-components

Import

Section titled “Import”
import "@nana-tec/ui-components/tab";

Basic usage

Section titled “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

Section titled “Icons & counts”

Add a count badge to a tab.

Inbox Drafts Inbox panel. Drafts panel.

Closable

Section titled “Closable”

Add closable to show a close button on a tab.

Overview Settings Overview panel. Settings panel.

API

Section titled “API”

Properties

PropertyAttributeTypeDefaultDescription
active—booleanfalseWhether the tab is the active/selected one (managed by the group).
closable—booleanfalseShow a close button.
count—string | number | undefined—Optional count shown as a small badge after the label.
disabled—booleanfalseDisable the tab.
panel—string''The name of the panel this tab controls (matches a panel's `name`).
size—TabSize'md'Tab size. Usually set automatically by the parent `nana-tab-group`.
variant—TabVariant'underline'Visual style. Usually set automatically by the parent `nana-tab-group`.

Events

EventDescription
nana-tab-closeEmitted when the tab is closed via the button or Delete / Backspace (`detail.panel`).

Slots

SlotDescription
(default)The tab's label.
prefixContent before the label, typically an icon.
suffixContent after the label, e.g. a count badge.

CSS parts

PartDescription
::part(base)The tab's inner container.
::part(count)The built-in count badge.
::part(close-button)The close button (when `closable`).

CSS custom properties

PropertyDescription
--nana-tab-hover-bgHover 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-bgFill of the active thumb in the segmented variant.
--nana-tab-inactive-colorLabel colour of an unselected tab. Defaults to the muted text step, which clears 4.5:1 on the segmented track; check contrast before recessing it further.

Events

Section titled “Events”
EventTypeDescription
nana-tab-closeCustomEventEmitted when the tab is closed via the button or Delete / Backspace (detail.panel).

Slots

Section titled “Slots”
SlotDescription
(default)The tab’s label.
prefixContent before the label, typically an icon.
suffixContent after the label, e.g. a count badge.

CSS Variables

Section titled “CSS Variables”
VariableDefaultDescription
--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

Section titled “CSS Parts”
PartDescription
baseThe tab’s inner container
countThe built-in count badge
close-buttonThe close button
Section titled “Related components”

Storybook

Section titled “Storybook”
Explore Tab interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook