Live demo — this example is server-driven; run the showcase locally for the interactive version.

Tabs

Tabbed navigation between sibling panels. Selection is driven by Alpine; arrow keys move focus between tabs via the runtime template's handleKeyNav.

Examples

Default tabs

Alpine tracks the active tab; arrow keys move focus through the tablist.

Overview panel — high-level summary.

Details panel — per-field values.

Logs panel — recent activity.

Box tabs

pf-m-box — bordered, card-like tab heads.

Box variant — content one.

Box variant — content two.

Boxed secondary tabs

pf-m-box pf-m-secondary — the secondary box variation.

Users panel content

Containers panel content

Database panel content

Box vertical tabs

pf-m-box pf-m-vertical — a boxed side rail.

General settings.

Security settings.

Notification preferences.

Vertical tabs

pf-m-vertical — tab rail on the side.

General settings.

Security settings.

Notification preferences.

Vertical expandable tabs

pf-m-expandable + a __toggle that collapses the rail behind the active tab name.

Vertical expandable responsive

Breakpoint modifiers collapse the rail only where needed: pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl.

Overflow tabs

pf-m-scrollable with working scroll buttons — Alpine enables each side based on scroll position.

Horizontal overflow tabs

A pf-m-overflow “More” tab opens a menu of the remaining tabs; the selection becomes the overflow tab’s label.

Current tab: Tab 1

Box overflow tabs

pf-m-box pf-m-scrollable — boxed tabs with working scroll buttons.

With adjusted inset

Responsive pf-m-inset-*-on-* modifiers; single-value insets use the inset= param.

Users panel content

Containers panel content

Database panel content

Box tabs with adjusted insets

Responsive pf-m-inset-*-on-* modifiers on a boxed tablist.

Users panel content

Containers panel content

Database panel content

With page insets

pf-m-page-insets — aligns the tabs with page section padding.

Users panel content

Containers panel content

Database panel content

With icons and text

Each tab carries a __item-icon before its text.

Users panel content

Containers panel content

Database panel content

Subtabs

A secondary pf-m-subtab tablist below the main tabs.

Main: t1 / sub: s1

Box tabs with subtabs

A boxed main row over a plain pf-m-subtab row.

Main: t1 / sub: s1

Filled tabs

pf-m-fill — tabs stretch to fill the full width.

Users panel content

Containers panel content

Database panel content

Filled tabs with icons

pf-m-fill — tabs stretch to fill the full width.

Users panel content

Containers panel content

Database panel content

Filled box tabs

pf-m-fill pf-m-box — filled tabs in the boxed style.

Users panel content

Containers panel content

Database panel content

Filled box tabs with icons

Filled box tabs with leading __item-icons.

Users panel content

Containers panel content

Database panel content

Tabs linked to nav elements

pf-m-nav — tab links are anchors for navigation use.

Cluster overview panel

Nodes panel

Workloads panel

Subtabs linked to nav elements

Nav tabs with a secondary nav subtab row.

Main: m1 / sub: sb1

Tabs used for site navigation

Nav tabs + pf-m-page-insets pf-m-no-border-bottom for masthead-adjacent site nav.

With tab content with body and padding

pf-v6-c-tab-content__body pf-m-padding pads the panel.

This tab content body carries pf-m-padding.

Containers panel — also padded.

Tab content

The pf-v6-c-tab-content panel on its own — the first panel active, the rest hidden.

Panel 1

Panel 2

Panel 3

Secondary tab content

pf-m-secondary panels — pair with subtab rows.

Panel 1

Panel 2

Panel 3

Dynamic tabs

Add and close tabs — Alpine owns the array; close buttons in __item-action, the add button in __add.

Active terminal: 1

With help action popover

An __item-action help button opens a per-tab popover.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

With close actions

An __item-action close button hides each tab; the flavors mirror PF’s example spread.

With help and close actions

Help and close action buttons share the item action area.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

Helpful information about the Users tab.
Helpful information about the Containers tab.
Helpful information about the Database tab.

Animated tabs accent

pf-m-animate-current slides the accent bar; Alpine measures the current tab and keeps the --link-accent-- variables live.

Users panel content

Containers panel content

Database panel content

Animated subtabs accent

The main and subtab rows each animate their own accent.

Main: t1 / sub: s1

Animated filled tabs accent

The accent stretches with pf-m-fill tab widths.

Users panel content

Containers panel content

Database panel content

Animated vertical tabs accent

On vertical tabs the accent tracks the current tab’s offset and height.

General settings.

Security settings.

Notification preferences.

Documentation

Tabs props

Parameters accepted by {#include components/navigation/tabs ... /}. Model mode: pass tabs=<Tabs> built in Java instead — the Java tab on each example shows the builder. Tab list items go in the slot.

* required
Name	Type	Description
* `id`	String	DOM id.
`box` / `vertical` / `filled`	boolean	Layout modifiers — emit matching `pf-m-*` on the wrapper.
`modifiers`	String	Extra `pf-m-*` classes verbatim — responsive insets, `pf-m-animate-current`, etc.
slot `content`	Qute block	<li class="pf-v6-c-tabs__item"> entries with tab buttons.

Usage

Tabs vs. anchors. Tabs hide siblings — useful when only one panel is relevant at a time. For browsable in-page sections use Jump links instead.

Server-driven tabs. Replace Alpine with HTMX — each tab does hx-get="/tab/N" targeting a single panel div. Mark the active tab on the server.

Edit tabs.html on GitHub