Toolbar relies on groups (.pf-v6-c-toolbar__group
) and items (.pf-v6-c-toolbar__item
), with default col/row gap values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. The default column-gap
value for items and groups is set to --pf-v6-c--ColumnGap
, whose value is --pf-t--global--spacer--md
or 16px. The default row-gap
value for items and groups is set to --pf-v6-c--RowGap
, whose value is --pf-t--global--spacer--sm
or 8px.
Default spacing for items and groups:
Class | CSS Variable | Computed Value |
---|---|---|
.pf-v6-c-toolbar__group | --pf-v6-c-toolbar__group--ColumnGap | 16px |
.pf-v6-c-toolbar__item | --pf-v6-c-toolbar__item--ColumnGap | 16px |
.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]} | .pf-v6-c-toolbar__content-section , .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__item | Modifies toolbar group or item spacing at optional breakpoint. |
.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]} | .pf-v6-c-toolbar__content-section , .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__item | Modifies both column gap and row gap for toolbar group or item spacing at optional breakpoint. |
Toolbar item types
Class | Applied to | Outcome |
---|---|---|
.pf-m-pagination | .pf-v6-c-toolbar__item | Initiates pagination and margin. |
Modifiers
Class | Applied to | Outcome |
---|---|---|
.pf-m-[hidden/visible] | .pf-v6-c-toolbar > * | Modifies toolbar element to be hidden/visible. |
.pf-m-flex-grow | .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__item | Modifies toolbar element to flex-grow: 1 , allowing it to consume available main-axis space. |
.pf-m-align-[start/end] | .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__item | Modifies toolbar main axis element alignment. |
.pf-m-align-items-[stretch/baseline/start/center/end] | .pf-v6-c-toolbar__content-section , .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__item | Modifies toolbar element cross axis child alignment. |
.pf-m-align-self-[stretch/baseline/start/center/end] | .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__item | Modifies toolbar element cross axis self alignment. |
Special notes
Several components in the following examples do not include functional and/or accessibility specifications (for example .pf-v6-c-select
, .pf-v6-c-options-menu
). Rather, .pf-v6-c-toolbar
focuses on functionality and accessibility specifications that apply to it only.
Available breakpoints are: -on-sm
, -on-md
, -on-lg
, -on-xl
, and -on-2xl
.
Examples
Item types
Class | Applied to | Outcome |
---|---|---|
.pf-v6-c-toolbar__item | <div> | Initiates the toolbar component item. Required |
.pf-v6-c-toolbar__group | <div> | Initiates the toolbar component group. |
Toolbar spacers and insets
Class | Applied to | Outcome |
---|---|---|
.pf-m-column-gap-[none/sm/md/lg] | .pf-v6-c-toolbar__group | Modifies toolbar group child spacing. |
.pf-m-inset-[none/sm/md/lg/xl/2xl] | .pf-v6-c-toolbar | Modifies toolbar horizontal. |
Width control usage
Class | Applied to | Outcome |
---|---|---|
--pf-v6-c-toolbar__item--Width: {width} | .pf-v6-c-toolbar__item | Modifies the width value of a toolbar item at optional breakpoint. |
--pf-v6-c-toolbar__item--MinWidth: {width} | .pf-v6-c-toolbar__item | Modifies the min width value of a toolbar item at optional breakpoint. |
Group types
Toolbar group types
Class | Applied to | Outcome |
---|---|---|
.pf-m-filter-group | .pf-v6-c-toolbar__group | Modifies toolbar group column gap. |
.pf-m-action-group | .pf-v6-c-toolbar__group | Modifies toolbar group column gap for action group. |
.pf-m-action-group-plain | .pf-v6-c-toolbar__group | Modifies toolbar group column gap for action plain group. |
.pf-m-action-group-inline | .pf-v6-c-toolbar__group | Modifies toolbar group column gap for action inline group. |
.pf-m-toggle-group | .pf-v6-c-toolbar__group | The .pf-m-toggle-group controls when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. .pf-m-show-on-{md, lg, xl} controls when filters are shown and when the toggle button is hidden. |
Accessibility
Attribute | Applied to | Outcome |
---|---|---|
hidden | .pf-v6-c-toolbar__item , .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__toggle , .pf-v6-c-toolbar__expandable-content | Indicates that the toggle group element is hidden. Required |
aria-expanded="[true/false]" | .pf-v6-c-toolbar__toggle > .pf-v6-c-button | Indicates that the expandable content is visible/hidden. Required |
aria-controls="[id of expandable content]" | .pf-v6-c-toolbar__toggle > .pf-v6-c-button | Identifies the expanded content controlled by the toggle button. Required |
id="[expandable-content_id]" | .pf-v6-c-toolbar__expandable-content | Provides a reference for toggle button description. Required |
Responsive attributes
Attribute | Applied to | Outcome |
---|---|---|
aria-haspopup=true | .pf-v6-c-toolbar__toggle > .pf-v6-c-button | When expandable content appears above content (mobile viewport), aria-haspopup=true should be applied to indicate that focus should be trapped. Required |
Usage
Class | Applied to | Outcome |
---|---|---|
.pf-m-[show/hide][-on-[sm/md/lg/xl/2xl]] | .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__item , .pf-v6-c-toolbar__expandable-content | Modifies toolbar element visibility. |
.pf-m-expanded | .pf-v6-c-toolbar__expandable-content , .pf-v6-c-toolbar__toggle | Modifies the component for the expanded state. |
Selected
Stacked
Documentation
Overview
As the toolbar component is a hybrid layout and component, some of its elements are presentational, while some require accessibility support.
Usage
Class | Applied to | Outcome |
---|---|---|
.pf-v6-c-toolbar | <div> | Initiates the toolbar component. Required |
.pf-v6-c-toolbar__item | <div> | Initiates a toolbar item. Required |
.pf-v6-c-toolbar__group | <div> | Initiates a toolbar group. |
.pf-v6-c-toolbar__content | <div> | Initiates a toolbar content container. Required |
.pf-v6-c-toolbar__content-section | <div> | Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one .pf-v6-c-toolbar__content-section per .pf-v6-c-toolbar__content Required |
.pf-v6-c-toolbar__expandable-content | <div> | Initiates a toolbar expandable content section. |
.pf-v6-c-toolbar__expand-all-icon | <div> | Initiates a toolbar expand all icon. |
.pf-m-sticky | .pf-v6-c-toolbar | Modifies toolbar component to be sticky to the top of its container. |
.pf-m-full-height | .pf-v6-c-toolbar , .pf-v6-c-toolbar__content-section , .pf-v6-c-toolbar__group | Modifies toolbar component to full height of its container and removes vertical padding. |
.pf-m-static | .pf-v6-c-toolbar | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
.pf-m-primary | .pf-v6-c-toolbar | Modifies toolbar to have primary background color. |
.pf-m-secondary | .pf-v6-c-toolbar | Modifies toolbar to have secondary background color. |
.pf-m-no-background | .pf-v6-c-toolbar | Modifies toolbar to have no background color. |
.pf-m-expanded | .pf-v6-c-toolbar__expandable-content | Modifies expandable content section for the expanded state. |
.pf-m-expanded | .pf-v6-c-toolbar__item.pf-m-expand-all | Modifies an expand all button for the expanded state. |
.pf-m-action-group | .pf-v6-c-toolbar__group | Initiates action group spacing. |
.pf-m-action-group-inline | .pf-v6-c-toolbar__group | Initiates inline action group spacing. |
.pf-m-action-group-plain | .pf-v6-c-toolbar__group | Initiates plain action group spacing. |
.pf-m-filter-group | .pf-v6-c-toolbar__group | Initiates filter group spacing. |
.pf-m-label | .pf-v6-c-toolbar__item | Initiates label item presenatation. |
.pf-m-label-group | .pf-v6-c-toolbar__group | Initiates label group spacing. |
.pf-m-overflow-container | .pf-v6-c-toolbar__item , .pf-v6-c-toolbar__group | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
.pf-m-expanded | .pf-v6-c-toolbar__expandable-content , .pf-v6-c-toolbar__toggle | Modifies the component for the expanded state. |
.pf-m-[wrap/nowrap] | .pf-v6-c-toolbar__content , .pf-v6-c-toolbar__content-section , .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__item | Modifies the toolbar element to wrap/not wrap. |
.pf-m-align-[start/center/end] | .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__item | Modifies toolbar main axis element alignment. |
.pf-m-align-items-[stretch/baseline/start/center/end] | .pf-v6-c-toolbar__content , .pf-v6-c-toolbar__content-section , .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__item | Modifies toolbar element cross axis child alignment. |
.pf-m-align-self-[stretch/baseline/start/center/end] | .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__item | Modifies toolbar element cross axis self alignment. |
.pf-m-inset-[none/sm/md/lg/xl/2xl] | .pf-v6-c-toolbar | Modifies toolbar horizontal. |
Accessibility
Attribute | Applied to | Outcome |
---|---|---|
hidden | .pf-v6-c-toolbar__item , .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__toggle , .pf-v6-c-toolbar__expandable-content | Indicates that the toolbar element is hidden. Required |
aria-expanded="[true/false]" | .pf-v6-c-toolbar__toggle > .pf-v6-c-button | Indicates the the expandable content is hidden/visible. Required |
aria-controls="[id of expandable content]" | .pf-v6-c-toolbar__toggle > .pf-v6-c-button | Identifies the expanded content controlled by the toggle button. Required |
id="[expandable-content_id]" | .pf-v6-c-toolbar__expandable-content | Provides a reference for toggle button description. Required |
aria-label="Expand all" | .pf-v6-c-toolbar__item.pf-m-expand-all | Provides an accessible label for the expand all item button. Required |
aria-label="Collapse all" | .pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded | Provides an accessible label for the expand all item button. Required |
Toggle group usage
Class | Applied to | Outcome |
---|---|---|
.pf-m-toggle-group | .pf-v6-c-toolbar__group | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
.pf-m-[show/hide] | .pf-v6-c-toolbar__group.pf-m-toggle-group , .pf-v6-c-toolbar__expandable-content | Modifies toolbar element to hidden. |
Spacer system
Class | Applied to | Outcome |
---|---|---|
.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl] | .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__item | Modifies toolbar group or item spacing at optional breakpoint. |
.pf-m-gap-[none/sm/md/lg/xl/2xl] | .pf-v6-c-toolbar__group , .pf-v6-c-toolbar__item | Modifies both column and row gap for toolbar group or item spacing at optional breakpoint. |
CSS variables
Expand or collapse column | Selector | Variable | Value | |
---|---|---|---|---|
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--RowGap | 1rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--PaddingBlockStart | 0 | ||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--PaddingBlockEnd | 1rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--PaddingInlineStart | 0 | ||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--PaddingInlineEnd | 0 | ||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--LineHeight | 1.5 | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--FontSize | 0.875rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--BackgroundColor | transparent | ||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--m-primary--BackgroundColor | (In light theme) #ffffff | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--m-secondary--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--m-no-background--BackgroundColor | transparent | ||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__item--Width | auto | ||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__item--MinWidth | auto | ||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__item--RowGap | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__item--ColumnGap | 1rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__item--m-overflow-container--MinWidth | 0 | ||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__group--RowGap | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__group--ColumnGap | 1rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__group--m-overflow-container--MinWidth | 0 | ||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__content--RowGap | 1rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__content--PaddingInlineStart | 0 | ||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__content--PaddingInlineEnd | 0 | ||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__content-section--RowGap | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__content-section--ColumnGap | 1rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__expandable-content--ZIndex | 200 | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__expandable-content--RowGap | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__expandable-content--PaddingBlockStart | 1rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__expandable-content--PaddingBlockEnd | 1rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__expandable-content--PaddingInlineStart | 1rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__expandable-content--PaddingInlineEnd | 1rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__expandable-content--BoxShadow | 0px
4px
8px
0px
rgba(0, 0, 0, 0.1200) | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__expandable-content--BackgroundColor | (In light theme) #ffffff | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--m-sticky--ZIndex | 100 | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--m-sticky--PaddingBlockStart | 1rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd | 1rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--m-sticky--BoxShadow | 0px
4px
8px
0px
rgba(0, 0, 0, 0.1200) | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar--m-sticky--BackgroundColor | (In light theme) #ffffff | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__expand-all-icon--Rotate | 0 | ||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__expand-all-icon--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate | 90deg | ||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__group--m-filter-group--ColumnGap | 0.25rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__item--m-label--FontWeight | 500 | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__group--m-label-group--ColumnGap | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__group--m-action-group--ColumnGap | 1rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap | 0.25rem | ||
| ||||
:where(:root, .pf-v6-c-toolbar) | --pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap | 1rem | ||
| ||||
.pf-v6-c-toolbar__content-section | --pf-v6-hidden-visible--visible--Display | flex | ||
.pf-v6-c-toolbar__content-section | --pf-v6-hidden-visible--hidden--Display | none | ||
.pf-v6-c-toolbar__content-section | --pf-v6-hidden-visible--Display | flex | ||
| ||||
.pf-v6-c-toolbar__content-section.pf-m-hidden | --pf-v6-hidden-visible--Display | none | ||
| ||||
.pf-v6-c-toolbar__content | --pf-v6-hidden-visible--visible--Display | grid | ||
.pf-v6-c-toolbar__content | --pf-v6-hidden-visible--hidden--Display | none | ||
.pf-v6-c-toolbar__content | --pf-v6-hidden-visible--Display | flex | ||
| ||||
.pf-v6-c-toolbar__content.pf-m-hidden | --pf-v6-hidden-visible--Display | none | ||
| ||||
.pf-v6-c-toolbar.pf-m-sticky | --pf-v6-c-toolbar--BackgroundColor | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-toolbar.pf-m-full-height | --pf-v6-c-toolbar--PaddingBlockStart | 0 | ||
.pf-v6-c-toolbar.pf-m-full-height | --pf-v6-c-toolbar--PaddinkBlockEnd | 0 | ||
.pf-v6-c-toolbar.pf-m-primary | --pf-v6-c-toolbar--BackgroundColor | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-toolbar.pf-m-secondary | --pf-v6-c-toolbar--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-toolbar.pf-m-no-background | --pf-v6-c-toolbar--BackgroundColor | transparent | ||
| ||||
.pf-v6-c-toolbar__item | --pf-v6-c-toolbar__item--Width--base | auto | ||
| ||||
.pf-v6-c-toolbar__item | --pf-v6-c-toolbar__item--MinWidth--base | auto | ||
| ||||
.pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded | --pf-v6-c-toolbar__expand-all-icon--Rotate | 90deg | ||
|