Tabs

Tabs organize related content into compact sections without leaving the current view.

Basic Usage

Use standard tabs for the most common inline section switching pattern.

Pane Tabs

Pane tabs are useful inside taller bounded regions where the tab list and content live together in the same panel.

Modal Tabs

Modal tabs adapt the same pattern to dialog layouts where the tab content needs a slightly different structure.

Sidebar Tabs

variant="sidebar" is the Craft-style vertical nav — group with pk-tab-heading, and optionally slot icon / status on each pk-tab.

Disabled and Overflow

Disabled tabs and scrollable tab lists — default, pane, and modal variants.

API

pk-tabs

Slots

Name	Description
nav	pk-tab triggers and optional pk-tab-heading group labels
(default)	pk-tab-panel content panels

Attributes & Properties

Name	Description
activation	manual — arrow keys move focus only; Enter/Space activates (Base UI default). auto — arrow keys activate tabs immediately. Type PkTabsActivation Default manual
ariaLabel aria-label	Type string | null Default null
disabled	Type boolean Default false
orientation	Type PkTabsOrientation Default horizontal
placement	Type PkTabsPlacement Default top
value	Type string
variant	Visual style — default (segmented), pane, modal, or sidebar (vertical nav). Type PkTabsVariant Default default

Events

Name	Description
pk-change	Active tab changed.
pk-tab-hide	A tab panel became hidden.
pk-tab-show	A tab panel became visible.

CSS Parts

Name	Description	CSS selector
base	Root container	::part(base)
list	Tab list	::part(list)

pk-tab

Slots

Name	Description
(default)	Tab label
icon	Optional leading content (icon, logo, etc.)
status	Optional trailing content (status dot, badge, etc.)

Attributes & Properties

Name	Description
disabled	Type boolean Default false
focusIndex focus-index	Type number Default -1
panelId	Type string | undefined
selected	Type boolean Default false
value	Type string

Methods

Name	Description
focusControl()	—

Events

Name	Description
pk-tab-keydown	—
pk-tab-select	—

CSS Parts

Name	Description	CSS selector
icon	Icon slot wrapper (hidden when empty)	::part(icon)
label	Label slot wrapper	::part(label)
status	Status slot wrapper (hidden when empty)	::part(status)
trigger	Tab button	::part(trigger)

pk-tab-heading

Slots

Name	Description
(default)	Heading text

CSS Parts

Name	Description	CSS selector
heading	Heading container	::part(heading)

pk-tab-panel

Slots

Name	Description
(default)	Panel content

Attributes & Properties

Name	Description
hidden	Type boolean Default true
tabId	Type string | undefined
value	Type string

CSS Parts

Name	Description	CSS selector
content	Panel container	::part(content)