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

Toolbar

Action bar pinned above a list or table — search, filters, sorts, and primary create-style actions. Use the groups + items structure to align left/right.

Examples

Basic

Search, filter, and action buttons in start/end-aligned groups.

Toolbar items

Items separated by a vertical divider, ending in a kebab.

With adjusted inset

pf-m-inset-md pf-m-inset-xl-on-lg.

No padding

pf-m-no-padding removes the toolbar's own padding for use inside already-padded containers.

Width control

Set per-breakpoint item widths with --pf-v6-c-toolbar__item--Width custom properties.

Vertical toolbar

pf-m-vertical — icon rail beside content.

Content beside the vertical toolbar.

Sticky toolbar

pf-m-sticky pins the toolbar while the container scrolls.

Scrollable row 1

Scrollable row 2

Scrollable row 3

Scrollable row 4

Scrollable row 5

Scrollable row 6

Scrollable row 7

Scrollable row 8

Scrollable row 9

Scrollable row 10

Scrollable row 11

Scrollable row 12

Dynamic sticky toolbar

A checkbox toggles pf-m-sticky live.

Toolbar is sticky

Scrollable row 1

Scrollable row 2

Scrollable row 3

Scrollable row 4

Scrollable row 5

Scrollable row 6

Scrollable row 7

Scrollable row 8

Scrollable row 9

Scrollable row 10

Scrollable row 11

Scrollable row 12

With groups of items

pf-m-filter-group, an icon-button group, and an end-aligned action group.

Filter group

The two PF filter shapes: pf-m-filter-group menu toggles, and a search input paired with a filter.

Action group

pf-m-action-group spacing for primary/secondary/tertiary action buttons.

Action group plain

pf-m-action-group-plain — tighter spacing for icon-only plain buttons.

Action group inline

pf-m-action-group-inline — summary text with inline link actions.

Background color variants

Default, pf-m-primary, pf-m-secondary, and pf-m-no-background.

Toggle groups

Filters collapse behind the filter-icon toggle below lg (pf-m-toggle-group pf-m-show-on-lg); the toggle opens the expandable content row. Covers both of PF\u2019s managed toggle-group sections.

With filters

Applied filters as removable labels in a category label-group, plus Clear all.

Label group

Applied-filter chip groups per category inside pf-m-label-group-container, with live removal.

Custom label group content

Chip groups combined with custom inline content — a live filter count and Clear all.

Stacked example

Two stacked toolbars — the second secondary.

Toolbar content wrapping

pf-m-wrap on the content section lets items wrap in narrow containers.

Toolbar group spacers

pf-m-column-gap-none vs pf-m-column-gap-2xl.

Toolbar item spacers

Per-item pf-m-gap-* modifiers.

Adjusted group column gap

pf-m-column-gap-[none/sm/lg] tunes the spacing inside toolbar groups.

Vertical with height visibility

pf-m-hidden + pf-m-visible-on-*-height show vertical toolbar items only when the container is tall enough.

Documentation

The toolbar is a template family: toolbar is the root and the structure composes from toolbar-content > toolbar-content-section > toolbar-group / toolbar-item includes in main blocks — no generic slot names.

* required
Name	Type	Description
`id / attrs`	String	Root id / raw passthrough.
`variant`	String	`primary` \| `secondary` background.
`noBackground / sticky / vertical`	Boolean	The matching `pf-m-*` modifier.
`modifiers`	String	Extra `pf-m-*` classes (e.g. `pf-m-inset-md`) — available on every family member.
`toolbar-content`	Include	One content row; `attrs` for x-show etc.
`toolbar-content-section`	Include	Holds groups/items; `attrs`.
`toolbar-group`	Include	`variant` (filter\|toggle), `alignEnd`, `columnGap`, `modifiers`, `attrs`.
`toolbar-item`	Include	`variant="label"`, `gap`, `alignEnd`, `modifiers`, `attrs`; content is the main block.

Usage

Pair with Table or Data list. Toolbar above a data view is the canonical pattern — search/filter on the left, page-level actions on the right.

Edit toolbar.html on GitHub