Data toolbar

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
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)