Patternfly Logo

Introduction

Toolbar relies on groups (.pf-c-toolbar__group) and items (.pf-c-toolbar__item), with default spacer 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 or item. Each modifier applies a unique CSS variable, therefore, the base spacer value for all elements can be customized and item/groups spacers can be themed individually. The default spacer value for items and groups is set to --pf-c-toolbar--spacer--base, whose value is --pf-global--spacer--md or 16px.

Default spacing for items and groups:

ClassCSS VariableComputed Value
.pf-c-toolbar__item--pf-c-toolbar__item--spacer16px
.pf-c-toolbar__group--pf-c-toolbar__group--spacer16px

Toolbar item types

ClassApplied toOutcome
.pf-m-bulk-select.pf-c-toolbar__itemInitiates bulk select spacing. Spacer value is set to var(--pf-c-toolbar--m-bulk-select--spacer).
.pf-m-overflow-menu.pf-c-toolbar__itemInitiates overflow menu spacing. Spacer value is set to var(--pf-c-toolbar--m-overflow-menu--spacer).
.pf-m-pagination.pf-c-toolbar__itemInitiates pagination spacing and margin. Spacer value is set to var(--pf-c-toolbar--m-pagination--spacer).
.pf-m-search-filter.pf-c-toolbar__itemInitiates search filter spacing. Spacer value is set to var(--pf-c-toolbar--m-search-filter--spacer).

Modifiers

ClassApplied toOutcome
.pf-m-hidden{-on-[breakpoint]}.pf-c-toolbar > *Modifies toolbar element to be hidden, at optional breakpoint.
.pf-m-visible{-on-[breakpoint]}.pf-c-toolbar > *Modifies toolbar element to be shown, at optional breakpoint.
.pf-m-align-right{-on-[breakpoint]}.pf-c-toolbar > *Modifies toolbar element to align right, at optional breakpoint.
.pf-m-align-left{-on-[breakpoint]}.pf-c-toolbar > *Modifies toolbar element to align left, at optional breakpoint.

Special notes

Several components in the following examples do not include functional and/or accessibility specifications (for example .pf-c-select, .pf-c-options-menu). Rather, .pf-c-toolbar focuses on functionality and accessibility specifications that apply to it only.

Available breakpoints are: -on-sm, -on-md, -on-lg, -on-xl, -on-2xl.

Examples

Simple

Item
Item
Item

Item
Item
Item

Item
Item
Item

Item types

ClassApplied toOutcome
.pf-c-toolbar__item<div>Initiates the toolbar component item. Required
.pf-c-toolbar__group<div>Initiates the toolbar component group.

Spacers

In some instances, it may be necessary to adjust spacing explicitly where items are hidden/shown. For example, if a .pf-m-toggle-group is adjacent to an element being hidden/shown, the spacing may appear to be inconsistent. If possible, rely on modifier values. Available spacer modifiers are .pf-m-spacer-{none, sm, md, lg}{-on-md, -on-lg, -on-xl} and .pf-m-space-items-{none, sm, md, lg}{-on-md, -on-lg, -on-xl}. These modifiers will overwrite existing modifiers provided by .pf-c-toolbar.

Adjusted spacers

Item
Item
Item
Item

Item
Item

Adjusted group spacers

Item
Item

Item
Item

Insets

Item
Item

Item
Item

Page insets

Item
Item

Item
Item

Toolbar spacers and insets

ClassApplied toOutcome
.pf-m-page-insets.pf-c-toolbarModifies toolbar insets to match page section, table, page header or any other component whose inset shifts from --pf-global--spacer--md to --pf-global--spacer--lg at the xl breakpoint.
.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}.pf-c-toolbar__group, .pf-c-toolbar__itemModifies toolbar group or item spacing.
.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}.pf-c-toolbar__groupModifies toolbar group child spacing.
.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}.pf-c-toolbarModifies toolbar horizontal padding.

Group types

Toolbar group types

ClassApplied toOutcome
.pf-m-filter-group.pf-c-toolbar__groupModifies toolbar group spacing. Spacer value is set to var(--pf-c-toolbar__group--m-filter-group--spacer). Child spacer value is set to var(--pf-c-toolbar__group--m-filter-group--space-items).
.pf-m-icon-button-group.pf-c-toolbar__groupModifies toolbar group spacing. Spacer value is set to var(--pf-c-toolbar__group--m-toggle-group--spacer). Child spacer value is set to var(--pf-c-toolbar__group--m-icon-button-group--space-items).
.pf-m-button-group.pf-c-toolbar__groupModifies toolbar group spacing. Spacer value is set to var(--pf-c-toolbar__group--m-toggle-group--spacer). Child spacer value is set to var(--pf-c-toolbar__group--m-button-group--space-items).

Toggle group

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

Toggle group modifier

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

AttributeApplied toOutcome
hidden.pf-c-toolbar__item, .pf-c-toolbar__group, .pf-c-toolbar__toggle, .pf-c-toolbar__expandable-contentIndicates that the toggle group element is hidden. Required
aria-expanded="true".pf-c-toolbar__toggle > .pf-c-buttonIndicates that the expandable content is visible. Required
aria-expanded="false".pf-c-toolbar__toggle > .pf-c-buttonIndicates the the expandable content is hidden. Required
aria-controls="[id of expandable content]".pf-c-toolbar__toggle > .pf-c-buttonIdentifies the expanded content controlled by the toggle button. Required
id="[expandable-content_id]".pf-c-toolbar__expandable-contentProvides a reference for toggle button description. Required

Responsive attributes

AttributeApplied toOutcome
aria-haspopup="true".pf-c-toolbar__toggle > .pf-c-buttonWhen expandable content appears above content (mobile viewport), aria-haspopup="true" should be applied to indicate that focus should be trapped. Required

Usage

ClassApplied toOutcome
.pf-m-show{-on-[breakpoint]}.pf-c-toolbar__group.pf-m-toggle-group, .pf-c-toolbar__expandable-contentModifies toolbar element visibility at breakpoint. This selector must be applied consistently to toggle group and expandable content.
.pf-m-chip-container.pf-c-toolbar__content-section, .pf-c-toolbar__groupModifies the toolbar element for applied filters layout.
.pf-m-expanded.pf-c-toolbar__expandable-content, .pf-c-toolbar__toggleModifies 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)

  • Chip one
  • Chip two
  • Chip three
  • Chip one
  • Chip two
  • Chip three

Selected filters on desktop (not responsive)

  • Chip one
  • Chip two
  • Chip three
  • Chip one
  • Chip two
  • Chip three

Stacked

Stacked on desktop


37 items
1 - 10 of  37

Stacked on mobile (filters collapsed, expandable content expanded)

Resource
Status
Type

37 items
1 - 10 of  37

Expanded elements

Expanded elements

Documentation

Overview

As the toolbar component is a hybrid layout and component, some of its elements are presentational, while some require accessibility support.

Usage

ClassApplied toOutcome
.pf-c-toolbar<div>Initiates the toolbar component. Required
.pf-c-toolbar__item<div>Initiates a toolbar item. Required
.pf-c-toolbar__group<div>Initiates a toolbar group.
.pf-c-toolbar__content<div>Initiates a toolbar content container. Required
.pf-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-c-toolbar__content-section per .pf-c-toolbar__content Required
.pf-c-toolbar__expandable-content<div>Initiates a toolbar expandable content section.
.pf-m-expanded.pf-c-toolbar__expandable-contentModifies expandable content section for the expanded state.
.pf-m-bulk-select.pf-c-toolbar__itemInitiates bulk select spacing.
.pf-m-overflow-menu.pf-c-toolbar__itemInitiates overflow menu spacing.
.pf-m-pagination.pf-c-toolbar__itemInitiates pagination spacing and margin.
.pf-m-search-filter.pf-c-toolbar__itemInitiates search filter spacing.
.pf-m-chip-group.pf-c-toolbar__itemInitiates chip group spacing.
.pf-m-expand-all.pf-c-toolbar__itemInitiates an item for an expand all button.
.pf-m-expanded.pf-c-toolbar__item.pf-m-expand-allModifies an expand all button for the expanded state.
.pf-m-button-group.pf-c-toolbar__groupInitiates button group spacing.
.pf-m-icon-button-group.pf-c-toolbar__groupInitiates icon button group spacing.
.pf-m-filter-group.pf-c-toolbar__groupInitiates filter group spacing.
.pf-m-hidden{-on-[breakpoint]}.pf-c-toolbar > *Modifies toolbar element to be hidden, at optional breakpoint.
.pf-m-visible{-on-[breakpoint]}.pf-c-toolbar > *Modifies toolbar element to be shown, at optional breakpoint.
.pf-m-align-right{-on-[breakpoint]}.pf-c-toolbar > *Modifies toolbar element to align right, at optional breakpoint.
.pf-m-align-left{-on-[breakpoint]}.pf-c-toolbar > *Modifies toolbar element to align left, at optional breakpoint.
.pf-m-label.pf-c-toolbar__itemModifies toolbar item to label.
.pf-m-chip-container.pf-c-toolbar__content, .pf-c-toolbar__groupModifies the toolbar element for applied filters layout.
.pf-m-expanded.pf-c-toolbar__expandable-content, .pf-c-toolbar__toggleModifies the component for the expanded state.
.pf-m-wrap.pf-c-toolbar, .pf-c-toolbar__content-section, .pf-c-toolbar__groupModifies the toolbar element to wrap.
.pf-m-nowrap.pf-c-toolbar, .pf-c-toolbar__groupModifies the toolbar element to nowrap.

Accessibility

AttributeApplied toOutcome
hidden.pf-c-toolbar__item, .pf-c-toolbar__group, .pf-c-toolbar__toggle, .pf-c-toolbar__expandable-contentIndicates that the toolbar element is hidden. Required
aria-expanded="true".pf-c-toolbar__toggle > .pf-c-buttonIndicates that the expandable content is visible. Required
aria-expanded="false".pf-c-toolbar__toggle > .pf-c-buttonIndicates the the expandable content is hidden. Required
aria-controls="[id of expandable content]".pf-c-toolbar__toggle > .pf-c-buttonIdentifies the expanded content controlled by the toggle button. Required
id="[expandable-content_id]".pf-c-toolbar__expandable-contentProvides a reference for toggle button description. Required
aria-label="Expand all".pf-c-toolbar__item.pf-m-expand-allProvides an accessible label for the expand all item button. Required
aria-label="Collapse all".pf-c-toolbar__item.pf-m-expand-all.pf-m-expandedProvides an accessible label for the expand all item button. Required

Toggle group usage

ClassApplied toOutcome
.pf-m-toggle-group.pf-c-toolbar__groupModifies 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{-on-[breakpoint]}.pf-c-toolbar__group.pf-m-toggle-group, .pf-c-toolbar__expandable-contentModifies toolbar element to hidden at breakpoint. This selector must be applied consistently to toggle group and expandable content.

Spacer system

ClassApplied toOutcome
.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}.pf-c-toolbar__group, .pf-c-toolbar__itemModifies toolbar group or item spacing.
.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}.pf-c-toolbar__groupModifies toolbar group child spacing.

CSS variables

.pf-c-toolbar--pf-c-toolbar--BackgroundColor
#fff
.pf-c-toolbar--pf-c-toolbar--RowGap
1.5rem
.pf-c-toolbar--pf-c-toolbar--PaddingTop
1rem
.pf-c-toolbar--pf-c-toolbar--PaddingBottom
1rem
.pf-c-toolbar--pf-c-toolbar__content--PaddingRight
1rem
.pf-c-toolbar--pf-c-toolbar__content--PaddingLeft
1rem
.pf-c-toolbar--pf-c-toolbar--m-page-insets--inset
1rem
.pf-c-toolbar--pf-c-toolbar--m-page-insets--xl--inset
1.5rem
.pf-c-toolbar--pf-c-toolbar__expandable-content--PaddingTop
1.5rem
.pf-c-toolbar--pf-c-toolbar__expandable-content--PaddingRight
1rem
.pf-c-toolbar--pf-c-toolbar__expandable-content--PaddingBottom
1rem
.pf-c-toolbar--pf-c-toolbar__expandable-content--PaddingLeft
1rem
.pf-c-toolbar--pf-c-toolbar__expandable-content--lg--PaddingRight
0
.pf-c-toolbar--pf-c-toolbar__expandable-content--lg--PaddingBottom
0
.pf-c-toolbar--pf-c-toolbar__expandable-content--lg--PaddingLeft
0
.pf-c-toolbar--pf-c-toolbar__expandable-content--ZIndex
100
.pf-c-toolbar--pf-c-toolbar__expandable-content--BoxShadow
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
.pf-c-toolbar--pf-c-toolbar__expandable-content--BackgroundColor
#fff
.pf-c-toolbar--pf-c-toolbar__expandable-content--m-expanded--GridRowGap
1.5rem
.pf-c-toolbar--pf-c-toolbar__group--m-chip-container--MarginTop
calc(1rem * -1)
.pf-c-toolbar--pf-c-toolbar__group--m-chip-container__item--MarginTop
1rem
.pf-c-toolbar--pf-c-toolbar--spacer--base
1rem
.pf-c-toolbar--pf-c-toolbar__item--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__group--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__group--m-toggle-group--spacer
0.5rem
.pf-c-toolbar--pf-c-toolbar__group--m-toggle-group--m-show--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__group--m-icon-button-group--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__group--m-icon-button-group--space-items
0
.pf-c-toolbar--pf-c-toolbar__group--m-button-group--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__group--m-button-group--space-items
0.5rem
.pf-c-toolbar--pf-c-toolbar__group--m-filter-group--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__group--m-filter-group--space-items
0
.pf-c-toolbar--pf-c-toolbar__item--m-overflow-menu--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__item--m-bulk-select--spacer
1.5rem
.pf-c-toolbar--pf-c-toolbar__item--m-search-filter--spacer
0.5rem
.pf-c-toolbar--pf-c-toolbar__item--m-chip-group--spacer
0.5rem
.pf-c-toolbar--pf-c-toolbar__item--m-label--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__item--m-label--FontWeight
700
.pf-c-toolbar--pf-c-toolbar__toggle--m-expanded__c-button--m-plain--Color
#151515
.pf-c-toolbar--pf-c-toolbar--c-divider--m-vertical--spacer
1rem
.pf-c-toolbar.pf-m-page-insets--pf-c-toolbar__content--PaddingRight
1rem
.pf-c-toolbar.pf-m-page-insets--pf-c-toolbar__content--PaddingLeft
1rem
.pf-c-toolbar__content-section > .pf-c-divider--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__content-section > .pf-c-divider.pf-m-vertical:last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar__group--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__group.pf-m-button-group--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__group.pf-m-button-group > *--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar__group.pf-m-icon-button-group--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__group.pf-m-icon-button-group > *--pf-c-toolbar--spacer
0
.pf-c-toolbar__group.pf-m-filter-group--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__group.pf-m-filter-group > *--pf-c-toolbar--spacer
0
.pf-c-toolbar__group.pf-m-toggle-group--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar__group:last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar__item--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__item.pf-m-overflow-menu--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__item.pf-m-bulk-select--pf-c-toolbar--spacer
1.5rem
.pf-c-toolbar__item.pf-m-search-filter--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar__item.pf-m-chip-group--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar__item.pf-m-label--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__item:last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar__expandable-content .pf-c-toolbar__group--pf-c-toolbar--spacer
0
.pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__item--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__group--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__group:last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-c-chip-group:last-child--pf-c-chip-group--MarginRight
0
.pf-c-toolbar .pf-c-chip-group li:last-child--pf-c-chip-group__li--m-toolbar--MarginRight
0
.pf-m-toggle-group.pf-m-show--pf-c-toolbar--spacer
1rem
.pf-c-toolbar .pf-m-space-items-none > *--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-space-items-none > :last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-space-items-sm > *--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar .pf-m-space-items-sm > :last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-space-items-md > *--pf-c-toolbar--spacer
1rem
.pf-c-toolbar .pf-m-space-items-md > :last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-space-items-lg > *--pf-c-toolbar--spacer
1.5rem
.pf-c-toolbar .pf-m-space-items-lg > :last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-spacer-none--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-spacer-none:last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-spacer-sm--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar .pf-m-spacer-sm:last-child--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar .pf-m-spacer-md--pf-c-toolbar--spacer
1rem
.pf-c-toolbar .pf-m-spacer-md:last-child--pf-c-toolbar--spacer
1rem
.pf-c-toolbar .pf-m-spacer-lg--pf-c-toolbar--spacer
1.5rem
.pf-c-toolbar .pf-m-spacer-lg:last-child--pf-c-toolbar--spacer
1.5rem
.pf-c-toolbar.pf-m-inset-none--pf-c-toolbar--inset
0
.pf-c-toolbar.pf-m-inset-none--pf-c-toolbar__content--PaddingRight
0
.pf-c-toolbar.pf-m-inset-none--pf-c-toolbar__content--PaddingLeft
0
.pf-c-toolbar.pf-m-inset-sm--pf-c-toolbar--inset
0.5rem
.pf-c-toolbar.pf-m-inset-sm--pf-c-toolbar__content--PaddingRight
0.5rem
.pf-c-toolbar.pf-m-inset-sm--pf-c-toolbar__content--PaddingLeft
0.5rem
.pf-c-toolbar.pf-m-inset-md--pf-c-toolbar--inset
1rem
.pf-c-toolbar.pf-m-inset-md--pf-c-toolbar__content--PaddingRight
1rem
.pf-c-toolbar.pf-m-inset-md--pf-c-toolbar__content--PaddingLeft
1rem
.pf-c-toolbar.pf-m-inset-lg--pf-c-toolbar--inset
1.5rem
.pf-c-toolbar.pf-m-inset-lg--pf-c-toolbar__content--PaddingRight
1.5rem
.pf-c-toolbar.pf-m-inset-lg--pf-c-toolbar__content--PaddingLeft
1.5rem
.pf-c-toolbar.pf-m-inset-xl--pf-c-toolbar--inset
2rem
.pf-c-toolbar.pf-m-inset-xl--pf-c-toolbar__content--PaddingRight
2rem
.pf-c-toolbar.pf-m-inset-xl--pf-c-toolbar__content--PaddingLeft
2rem
.pf-c-toolbar.pf-m-inset-2xl--pf-c-toolbar--inset
3rem
.pf-c-toolbar.pf-m-inset-2xl--pf-c-toolbar__content--PaddingRight
3rem
.pf-c-toolbar.pf-m-inset-2xl--pf-c-toolbar__content--PaddingLeft
3rem
.pf-c-toolbar__content-section > :last-child--pf-c-toolbar--spacer
0

View source on Github