Skip to content

Toolbar

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

Simple

Item
Item
Item
Item
Item
Item
Item
Item
Item

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.

Adjusted group column gap

Item
Item
Item
Item

Insets

Item
Item
Item
Item

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

Item
Item
Item
Item

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

Filter group

Standard filters

Input groups and filters

Action group

Action group plain

Action group inline

6 filters applied

Label group

  • Label one
  • Label two
  • Label three
  • Label one
  • Label two
  • Label three

Toggle group on mobile (filters collapsed, expandable content expanded)

Toggle group on desktop

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

Selected filters on mobile (filters collapsed, selected filters summary visible)

6 filters applied

Selected filters on mobile (filters collapsed, expandable content expanded)

  • Label one
  • Label two
  • Label three
  • Label one
  • Label two
  • Label three
6 filters applied

Selected filters on desktop (not responsive)

  • Label one
  • Label two
  • Label three
  • Label one
  • Label two
  • Label three
6 filters applied

Stacked

Stacked on desktop

37 items

Stacked on mobile (filters collapsed, expandable content expanded)

  • Label one
  • Label two
  • Label three
  • Label one
  • Label two
  • Label three
37 items

Primary background

Item
Item
Item
Item
Item
Item
Item
Item
Item

Secondary background

Item
Item
Item
Item
Item
Item
Item
Item
Item

No background

Item
Item
Item
Item
Item
Item
Item
Item
Item

Sticky toolbar

Item
Item
Item
Item
Item
Item
Item
Item
Item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor mattis massa dignissim blandit. Mauris pellentesque nisi a erat ultricies, mollis auctor nulla volutpat. Donec eu nisl magna. Donec nisi nulla, blandit et mauris in, lobortis elementum neque. Nunc pharetra eleifend purus, in commodo nisl accumsan in. Vestibulum feugiat nisl eu venenatis feugiat. Morbi ornare velit vitae tellus sollicitudin, sed ornare neque sagittis. Proin sodales, libero et vestibulum luctus, nunc mi euismod dui, vel accumsan lacus odio vel nibh. Etiam at mattis purus, sit amet vestibulum metus. Maecenas feugiat condimentum ligula eget hendrerit. Nullam eleifend convallis sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam rhoncus consectetur enim, at interdum mi tincidunt eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Maecenas vel sollicitudin ipsum, pulvinar pharetra magna. Aenean vel ipsum vel purus malesuada sagittis eget ac odio. Nullam vitae diam mollis, consectetur est vitae, sodales diam. Vivamus eu lectus quis mi maximus porta. Praesent erat sapien, vestibulum nec libero non, tincidunt congue mauris. Pellentesque vitae imperdiet mi. Nulla in ipsum neque. Cras a quam ut sem venenatis euismod non at tortor. Mauris porta purus augue, ut pharetra elit varius at. Vestibulum fringilla ligula ac leo tristique, porta venenatis nibh convallis.

Vestibulum vel orci mattis magna tristique suscipit. In vel tellus tempor, consectetur mi at, pellentesque enim. Cras venenatis tellus eget velit porttitor, sit amet malesuada tortor venenatis. Maecenas vitae augue ac orci volutpat gravida. In fermentum, orci eget tincidunt lobortis, turpis orci porta nibh, cursus dignissim lectus sapien at felis. Nulla facilisi. Aenean lectus justo, pellentesque sed nulla ut, pulvinar pellentesque tortor. Ut tempus euismod dolor gravida rhoncus. Quisque sed lorem sit amet erat tincidunt aliquet quis in nulla. Maecenas arcu erat, hendrerit a dui eget, convallis pharetra sapien. Nunc tellus enim, dictum eu egestas vel, ultrices eget est. Etiam quis vehicula sem. Nulla facilisi. Donec ante ipsum, fringilla iaculis ex a, tincidunt lobortis mi.

Etiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse porttitor sem quis ante consequat, vitae commodo nulla ultricies. Nulla fermentum ipsum ac dolor elementum, eu luctus ex condimentum. Sed sed arcu aliquam, porta metus in, sollicitudin felis. Sed faucibus lacus consectetur orci ultricies laoreet. Morbi sed lectus dictum sem tempor porta. Donec ut diam tempor, venenatis erat vitae, accumsan diam. Etiam sed purus eget lacus vehicula iaculis non euismod dolor. Quisque ultricies eget est in semper.

Fusce tristique nulla id vestibulum maximus. Morbi sit amet nisi nec orci pulvinar interdum. Duis convallis, nunc vel pharetra blandit, urna neque eleifend nunc, maximus faucibus tellus nisl a velit. Aliquam quis turpis tempor nisi ultricies fermentum at et ipsum. Pellentesque vel tincidunt nisl. Donec elit ante, sodales ac ultrices vitae, egestas ut magna. Nulla sollicitudin ornare mi, a porttitor sem fermentum vitae. Praesent maximus fringilla gravida. Sed ultricies turpis ut lacus sodales, et aliquet risus accumsan. Pellentesque lacus sapien, cursus vitae nulla vel, bibendum tristique risus.

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 columnSelectorVariableValue
.pf-v6-c-toolbar--pf-v6-c-toolbar--RowGap
1rem
.pf-v6-c-toolbar--pf-v6-c-toolbar--PaddingBlockStart
0
.pf-v6-c-toolbar--pf-v6-c-toolbar--PaddingBlockEnd
1rem
.pf-v6-c-toolbar--pf-v6-c-toolbar--PaddingInlineStart
0
.pf-v6-c-toolbar--pf-v6-c-toolbar--PaddingInlineEnd
0
.pf-v6-c-toolbar--pf-v6-c-toolbar--LineHeight
1.5
.pf-v6-c-toolbar--pf-v6-c-toolbar--FontSize
0.875rem
.pf-v6-c-toolbar--pf-v6-c-toolbar--BackgroundColor
transparent
.pf-v6-c-toolbar--pf-v6-c-toolbar--m-primary--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-toolbar--pf-v6-c-toolbar--m-secondary--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-toolbar--pf-v6-c-toolbar--m-no-background--BackgroundColor
transparent
.pf-v6-c-toolbar--pf-v6-c-toolbar__item--Width
auto
.pf-v6-c-toolbar--pf-v6-c-toolbar__item--MinWidth
auto
.pf-v6-c-toolbar--pf-v6-c-toolbar__item--RowGap
0.5rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__item--ColumnGap
1rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__item--m-overflow-container--MinWidth
0
.pf-v6-c-toolbar--pf-v6-c-toolbar__group--RowGap
0.5rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__group--ColumnGap
1rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__group--m-overflow-container--MinWidth
0
.pf-v6-c-toolbar--pf-v6-c-toolbar__content--RowGap
1rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__content--PaddingInlineStart
0
.pf-v6-c-toolbar--pf-v6-c-toolbar__content--PaddingInlineEnd
0
.pf-v6-c-toolbar--pf-v6-c-toolbar__content-section--RowGap
0.5rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__content-section--ColumnGap
1rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__expandable-content--ZIndex
200
.pf-v6-c-toolbar--pf-v6-c-toolbar__expandable-content--RowGap
0.5rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__expandable-content--PaddingBlockStart
1rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__expandable-content--PaddingBlockEnd
1rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__expandable-content--PaddingInlineStart
1rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__expandable-content--PaddingInlineEnd
1rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__expandable-content--BoxShadow
0px 10px 9px -8px rgba(41, 41, 41, 0.1500)
.pf-v6-c-toolbar--pf-v6-c-toolbar__expandable-content--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-toolbar--pf-v6-c-toolbar--m-sticky--ZIndex
100
.pf-v6-c-toolbar--pf-v6-c-toolbar--m-sticky--PaddingBlockStart
1rem
.pf-v6-c-toolbar--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd
1rem
.pf-v6-c-toolbar--pf-v6-c-toolbar--m-sticky--BoxShadow
0px 10px 9px -8px rgba(41, 41, 41, 0.1500)
.pf-v6-c-toolbar--pf-v6-c-toolbar--m-sticky--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-toolbar--pf-v6-c-toolbar__expand-all-icon--Rotate
0
.pf-v6-c-toolbar--pf-v6-c-toolbar__expand-all-icon--TransitionDuration
200ms
.pf-v6-c-toolbar--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-toolbar--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate
90deg
.pf-v6-c-toolbar--pf-v6-c-toolbar__group--m-filter-group--ColumnGap
0.25rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__item--m-label--FontWeight
500
.pf-v6-c-toolbar--pf-v6-c-toolbar__group--m-label-group--ColumnGap
0.5rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__group--m-action-group--ColumnGap
1rem
.pf-v6-c-toolbar--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap
0.25rem
.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

View source on GitHub