HTML

Data toolbar

IntroductionExamplesDocumentationCSS Variables

Introduction

Data toolbar relies on groups (.pf-c-data-toolbar__group) and items (.pf-c-data-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-data-toolbar--spacer--base, whose value is --pf-global--spacer--md or 16px.

Default spacing for items and groups:

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

Data toolbar item types

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

Modifiers

ClassApplied toOutcome
.pf-m-hidden{-on-[breakpoint]}.pf-c-data-toolbar > *Modifies toolbar element to be hidden, at optional breakpoint.
.pf-m-visible{-on-[breakpoint]}.pf-c-data-toolbar > *Modifies toolbar element to be shown, at optional breakpoint.
.pf-m-align-right{-on-[breakpoint]}.pf-c-data-toolbar > *Modifies toolbar element to align right, at optional breakpoint.
.pf-m-align-left{-on-[breakpoint]}.pf-c-data-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-data-toolbar focuses on functionality and accessibility specifications that apply to it only.

Available breakpoints are: -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-data-toolbar__item<div>Initiates the toolbar component item. Required
.pf-c-data-toolbar__group<div>Initiates the toolbar component group.
.pf-m-separator.pf-c-data-toolbar__itemModifies item to a separator.

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-data-toolbar.

Adjusted spacers

Item
Item
Item
Item
Item
Item

Adjusted group spacers

Item
Item
Item
Item

Data toolbar spacers

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

Group types

Data toolbar group types

ClassApplied toOutcome
.pf-m-filter-group.pf-c-data-toolbar__groupModifies toolbar group spacing. Spacer value is set to var(--pf-c-data-toolbar__group--m-filter-group--spacer). Child spacer value is set to var(--pf-c-data-toolbar__group--m-filter-group--space-items).
.pf-m-icon-button-group.pf-c-data-toolbar__groupModifies toolbar group spacing. Spacer value is set to var(--pf-c-data-toolbar__group--m-toggle-group--spacer). Child spacer value is set to var(--pf-c-data-toolbar__group--m-icon-button-group--space-items).
.pf-m-button-group.pf-c-data-toolbar__groupModifies toolbar group spacing. Spacer value is set to var(--pf-c-data-toolbar__group--m-toggle-group--spacer). Child spacer value is set to var(--pf-c-data-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-data-toolbar__item, .pf-c-data-toolbar__group, .pf-c-data-toolbar__toggle, .pf-c-data-toolbar__expandable-contentIndicates that the toggle group element is hidden. Required
aria-expanded="true".pf-c-data-toolbar__toggle > .pf-c-buttonIndicates that the expandable content is visible. Required
aria-expanded="false".pf-c-data-toolbar__toggle > .pf-c-buttonIndicates the the expandable content is hidden. Required
aria-controls="[id of expandable content]".pf-c-data-toolbar__toggle > .pf-c-buttonIdentifies the expanded content controlled by the toggle button. Required
id="[expandable-content_id]".pf-c-data-toolbar__expandable-contentProvides a reference for toggle button description. Required

Responsive attributes

AttributeApplied toOutcome
aria-haspopup="true".pf-c-data-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-data-toolbar__group.pf-m-toggle-group, .pf-c-data-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-data-toolbar__content-section, .pf-c-data-toolbar__groupModifies the data toolbar element for applied filters layout.
.pf-m-expanded.pf-c-data-toolbar__expandable-content, .pf-c-data-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)

  • Status

    • Chip one
    • Chip two
    • Chip three
  • Risk

    • Chip one
    • Chip two
    • Chip three

Selected filters on desktop (not responsive)

  • Status

    • Chip one
    • Chip two
    • Chip three
  • Risk

    • Chip one
    • Chip two
    • Chip three

Stacked

Stacked on desktop


37 items
1 - 10of 37

Stacked on mobile (filters collapsed, expandable content expanded)

Resource
Status
Type

37 items
1 - 10of 37

Expanded elements

Expanded elements

Documentation

Overview

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

Usage

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

Accessibility

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

Toggle group usage

ClassApplied toOutcome
.pf-m-toggle-group.pf-c-data-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-data-toolbar__group.pf-m-toggle-group, .pf-c-data-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-data-toolbar__group, .pf-c-data-toolbar__itemModifies toolbar group or item spacing.
.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}.pf-c-data-toolbar__groupModifies toolbar group child spacing.

CSS Variables

--pf-c-data-toolbar__content--m-chip-container__item--MarginTopc_data_toolbar__content_m_chip_container__item_MarginTop
var(--pf-global--spacer--md)
--pf-c-data-toolbar__content--m-chip-container--MarginTopc_data_toolbar__content_m_chip_container_MarginTop
calc(var(--pf-global--spacer--md) * -1)
--pf-c-data-toolbar__content--PaddingLeftc_data_toolbar__content_PaddingLeft
var(--pf-global--spacer--lg)
--pf-c-data-toolbar__content--PaddingRightc_data_toolbar__content_PaddingRight
var(--pf-global--spacer--lg)
--pf-c-data-toolbar__expandable-content--BackgroundColorc_data_toolbar__expandable_content_BackgroundColor
var(--pf-global--BackgroundColor--light-100)
--pf-c-data-toolbar__expandable-content--BoxShadowc_data_toolbar__expandable_content_BoxShadow
var(--pf-global--BoxShadow--md-bottom)
--pf-c-data-toolbar__expandable-content--lg--PaddingBottomc_data_toolbar__expandable_content_lg_PaddingBottom
0
--pf-c-data-toolbar__expandable-content--lg--PaddingLeftc_data_toolbar__expandable_content_lg_PaddingLeft
0
--pf-c-data-toolbar__expandable-content--lg--PaddingRightc_data_toolbar__expandable_content_lg_PaddingRight
0
--pf-c-data-toolbar__expandable-content--m-expanded--GridRowGapc_data_toolbar__expandable_content_m_expanded_GridRowGap
var(--pf-global--gutter)
--pf-c-data-toolbar__expandable-content--PaddingBottomc_data_toolbar__expandable_content_PaddingBottom
var(--pf-global--spacer--md)
--pf-c-data-toolbar__expandable-content--PaddingLeftc_data_toolbar__expandable_content_PaddingLeft
var(--pf-global--spacer--lg)
--pf-c-data-toolbar__expandable-content--PaddingRightc_data_toolbar__expandable_content_PaddingRight
var(--pf-global--spacer--lg)
--pf-c-data-toolbar__expandable-content--PaddingTopc_data_toolbar__expandable_content_PaddingTop
var(--pf-global--spacer--lg)
--pf-c-data-toolbar__expandable-content--ZIndexc_data_toolbar__expandable_content_ZIndex
var(--pf-global--ZIndex--xs)
--pf-c-data-toolbar__group--m-button-group--space-itemsc_data_toolbar__group_m_button_group_space_items
var(--pf-global--spacer--sm)
--pf-c-data-toolbar__group--m-button-group--spacerc_data_toolbar__group_m_button_group_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-filter-group--space-itemsc_data_toolbar__group_m_filter_group_space_items
0
--pf-c-data-toolbar__group--m-filter-group--spacerc_data_toolbar__group_m_filter_group_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-icon-button-group--space-itemsc_data_toolbar__group_m_icon_button_group_space_items
0
--pf-c-data-toolbar__group--m-icon-button-group--spacerc_data_toolbar__group_m_icon_button_group_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-toggle-group--m-show--spacerc_data_toolbar__group_m_toggle_group_m_show_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-toggle-group--spacerc_data_toolbar__group_m_toggle_group_spacer
var(--pf-global--spacer--sm)
--pf-c-data-toolbar__group--spacerc_data_toolbar__group_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-bulk-select--spacerc_data_toolbar__item_m_bulk_select_spacer
var(--pf-global--spacer--lg)
--pf-c-data-toolbar__item--m-chip-group--spacerc_data_toolbar__item_m_chip_group_spacer
var(--pf-global--spacer--sm)
--pf-c-data-toolbar__item--m-label--FontWeightc_data_toolbar__item_m_label_FontWeight
var(--pf-global--FontWeight--bold)
--pf-c-data-toolbar__item--m-label--spacerc_data_toolbar__item_m_label_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-overflow-menu--spacerc_data_toolbar__item_m_overflow_menu_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-search-filter--spacerc_data_toolbar__item_m_search_filter_spacer
var(--pf-global--spacer--sm)
--pf-c-data-toolbar__item--m-separator--BackgroundColorc_data_toolbar__item_m_separator_BackgroundColor
var(--pf-global--BorderColor--dark-100)
--pf-c-data-toolbar__item--m-separator--Heightc_data_toolbar__item_m_separator_Height
var(--pf-global--FontSize--lg)
--pf-c-data-toolbar__item--m-separator--spacerc_data_toolbar__item_m_separator_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-separator--Widthc_data_toolbar__item_m_separator_Width
var(--pf-global--BorderWidth--md)
--pf-c-data-toolbar__item--spacerc_data_toolbar__item_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__toggle--m-expanded__c-button--m-plain--Colorc_data_toolbar__toggle_m_expanded__c_button_m_plain_Color
var(--pf-global--Color--dark-100)
--pf-c-data-toolbar--BackgroundColorc_data_toolbar_BackgroundColor
var(--pf-global--BackgroundColor--light-100)
--pf-c-data-toolbar--PaddingBottomc_data_toolbar_PaddingBottom
var(--pf-global--spacer--md)
--pf-c-data-toolbar--PaddingTopc_data_toolbar_PaddingTop
var(--pf-global--spacer--md)
--pf-c-data-toolbar--RowGapc_data_toolbar_RowGap
var(--pf-global--spacer--lg)
--pf-c-data-toolbar--spacerc_data_toolbar_spacer
var(--pf-global--spacer--lg)
--pf-c-data-toolbar--spacer--basec_data_toolbar_spacer_base
var(--pf-global--spacer--md)