HTML
Data toolbar
IntroductionExamplesDocumentationCSS VariablesIntroduction
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:
| Class | CSS Variable | Computed Value |
|---|---|---|
.pf-c-data-toolbar__item | --pf-c-data-toolbar__item--spacer | 16px |
.pf-c-data-toolbar__group | --pf-c-data-toolbar__group--spacer | 16px |
Data toolbar item types
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-bulk-select | .pf-c-data-toolbar__item | Initiates 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__item | Initiates overflow menu spacing. Spacer value is set to var(--pf-c-data-toolbar--m-overflow-menu--spacer). |
.pf-m-pagination | .pf-c-data-toolbar__item | Initiates 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__item | Initiates search filter spacing. Spacer value is set to var(--pf-c-data-toolbar--m-search-filter--spacer). |
Modifiers
| Class | Applied to | Outcome |
|---|---|---|
.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
Item types
| Class | Applied to | Outcome |
|---|---|---|
.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__item | Modifies 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.
Data toolbar spacers
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]} | .pf-c-data-toolbar__group, .pf-c-data-toolbar__item | Modifies toolbar group or item spacing. |
.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]} | .pf-c-data-toolbar__group | Modifies toolbar group child spacing. |
Data toolbar group types
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-filter-group | .pf-c-data-toolbar__group | Modifies 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__group | Modifies 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__group | Modifies 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 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
| Attribute | Applied to | Outcome |
|---|---|---|
hidden | .pf-c-data-toolbar__item, .pf-c-data-toolbar__group, .pf-c-data-toolbar__toggle, .pf-c-data-toolbar__expandable-content | Indicates that the toggle group element is hidden. Required |
aria-expanded="true" | .pf-c-data-toolbar__toggle > .pf-c-button | Indicates that the expandable content is visible. Required |
aria-expanded="false" | .pf-c-data-toolbar__toggle > .pf-c-button | Indicates the the expandable content is hidden. Required |
aria-controls="[id of expandable content]" | .pf-c-data-toolbar__toggle > .pf-c-button | Identifies the expanded content controlled by the toggle button. Required |
id="[expandable-content_id]" | .pf-c-data-toolbar__expandable-content | Provides a reference for toggle button description. Required |
Responsive attributes
| Attribute | Applied to | Outcome |
|---|---|---|
aria-haspopup="true" | .pf-c-data-toolbar__toggle > .pf-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{-on-[breakpoint]} | .pf-c-data-toolbar__group.pf-m-toggle-group, .pf-c-data-toolbar__expandable-content | Modifies 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__group | Modifies the data toolbar element for applied filters layout. |
.pf-m-expanded | .pf-c-data-toolbar__expandable-content, .pf-c-data-toolbar__toggle | Modifies the component for the expanded state. |
Selected
Stacked
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
| Class | Applied to | Outcome |
|---|---|---|
.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-content | Modifies expandable content section for the expanded state. |
.pf-m-separator | .pf-c-data-toolbar__item | Initiates separator border. |
.pf-m-bulk-select | .pf-c-data-toolbar__item | Initiates bulk select spacing. |
.pf-m-overflow-menu | .pf-c-data-toolbar__item | Initiates overflow menu spacing. |
.pf-m-pagination | .pf-c-data-toolbar__item | Initiates pagination spacing and margin. |
.pf-m-search-filter | .pf-c-data-toolbar__item | Initiates search filter spacing. |
.pf-m-chip-group | .pf-c-data-toolbar__item | Initiates chip group spacing. |
.pf-m-button-group | .pf-c-data-toolbar__group | Initiates button group spacing. |
.pf-m-icon-button-group | .pf-c-data-toolbar__group | Initiates icon button group spacing. |
.pf-m-filter-group | .pf-c-data-toolbar__group | Initiates 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__item | Modifies toolbar item to label. |
.pf-m-chip-container | .pf-c-data-toolbar__content, .pf-c-data-toolbar__group | Modifies the data toolbar element for applied filters layout. |
.pf-m-expanded | .pf-c-data-toolbar__expandable-content, .pf-c-data-toolbar__toggle | Modifies the component for the expanded state. |
Accessibility
| Attribute | Applied to | Outcome |
|---|---|---|
hidden | .pf-c-data-toolbar__item, .pf-c-data-toolbar__group, .pf-c-data-toolbar__toggle, .pf-c-data-toolbar__expandable-content | Indicates that the data toolbar element is hidden. Required |
aria-expanded="true" | .pf-c-data-toolbar__toggle > .pf-c-button | Indicates that the expandable content is visible. Required |
aria-expanded="false" | .pf-c-data-toolbar__toggle > .pf-c-button | Indicates the the expandable content is hidden. Required |
aria-controls="[id of expandable content]" | .pf-c-data-toolbar__toggle > .pf-c-button | Identifies the expanded content controlled by the toggle button. Required |
id="[expandable-content_id]" | .pf-c-data-toolbar__expandable-content | Provides a reference for toggle button description. Required |
Toggle group usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-toggle-group | .pf-c-data-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{-on-[breakpoint]} | .pf-c-data-toolbar__group.pf-m-toggle-group, .pf-c-data-toolbar__expandable-content | Modifies toolbar element to hidden at breakpoint. This selector must be applied consistently to toggle group and expandable content. |
Spacer system
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]} | .pf-c-data-toolbar__group, .pf-c-data-toolbar__item | Modifies toolbar group or item spacing. |
.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]} | .pf-c-data-toolbar__group | Modifies toolbar group child spacing. |
CSS Variables
| --pf-c-data-toolbar__content--m-chip-container__item--MarginTop | c_data_toolbar__content_m_chip_container__item_MarginTop | var(--pf-global--spacer--md) |
| --pf-c-data-toolbar__content--m-chip-container--MarginTop | c_data_toolbar__content_m_chip_container_MarginTop | calc(var(--pf-global--spacer--md) * -1) |
| --pf-c-data-toolbar__content--PaddingLeft | c_data_toolbar__content_PaddingLeft | var(--pf-global--spacer--lg) |
| --pf-c-data-toolbar__content--PaddingRight | c_data_toolbar__content_PaddingRight | var(--pf-global--spacer--lg) |
| --pf-c-data-toolbar__expandable-content--BackgroundColor | c_data_toolbar__expandable_content_BackgroundColor | var(--pf-global--BackgroundColor--light-100) |
| --pf-c-data-toolbar__expandable-content--BoxShadow | c_data_toolbar__expandable_content_BoxShadow | var(--pf-global--BoxShadow--md-bottom) |
| --pf-c-data-toolbar__expandable-content--lg--PaddingBottom | c_data_toolbar__expandable_content_lg_PaddingBottom | 0 |
| --pf-c-data-toolbar__expandable-content--lg--PaddingLeft | c_data_toolbar__expandable_content_lg_PaddingLeft | 0 |
| --pf-c-data-toolbar__expandable-content--lg--PaddingRight | c_data_toolbar__expandable_content_lg_PaddingRight | 0 |
| --pf-c-data-toolbar__expandable-content--m-expanded--GridRowGap | c_data_toolbar__expandable_content_m_expanded_GridRowGap | var(--pf-global--gutter) |
| --pf-c-data-toolbar__expandable-content--PaddingBottom | c_data_toolbar__expandable_content_PaddingBottom | var(--pf-global--spacer--md) |
| --pf-c-data-toolbar__expandable-content--PaddingLeft | c_data_toolbar__expandable_content_PaddingLeft | var(--pf-global--spacer--lg) |
| --pf-c-data-toolbar__expandable-content--PaddingRight | c_data_toolbar__expandable_content_PaddingRight | var(--pf-global--spacer--lg) |
| --pf-c-data-toolbar__expandable-content--PaddingTop | c_data_toolbar__expandable_content_PaddingTop | var(--pf-global--spacer--lg) |
| --pf-c-data-toolbar__expandable-content--ZIndex | c_data_toolbar__expandable_content_ZIndex | var(--pf-global--ZIndex--xs) |
| --pf-c-data-toolbar__group--m-button-group--space-items | c_data_toolbar__group_m_button_group_space_items | var(--pf-global--spacer--sm) |
| --pf-c-data-toolbar__group--m-button-group--spacer | c_data_toolbar__group_m_button_group_spacer | var(--pf-global--spacer--md) |
| --pf-c-data-toolbar__group--m-filter-group--space-items | c_data_toolbar__group_m_filter_group_space_items | 0 |
| --pf-c-data-toolbar__group--m-filter-group--spacer | c_data_toolbar__group_m_filter_group_spacer | var(--pf-global--spacer--md) |
| --pf-c-data-toolbar__group--m-icon-button-group--space-items | c_data_toolbar__group_m_icon_button_group_space_items | 0 |
| --pf-c-data-toolbar__group--m-icon-button-group--spacer | c_data_toolbar__group_m_icon_button_group_spacer | var(--pf-global--spacer--md) |
| --pf-c-data-toolbar__group--m-toggle-group--m-show--spacer | c_data_toolbar__group_m_toggle_group_m_show_spacer | var(--pf-global--spacer--md) |
| --pf-c-data-toolbar__group--m-toggle-group--spacer | c_data_toolbar__group_m_toggle_group_spacer | var(--pf-global--spacer--sm) |
| --pf-c-data-toolbar__group--spacer | c_data_toolbar__group_spacer | var(--pf-global--spacer--md) |
| --pf-c-data-toolbar__item--m-bulk-select--spacer | c_data_toolbar__item_m_bulk_select_spacer | var(--pf-global--spacer--lg) |
| --pf-c-data-toolbar__item--m-chip-group--spacer | c_data_toolbar__item_m_chip_group_spacer | var(--pf-global--spacer--sm) |
| --pf-c-data-toolbar__item--m-label--FontWeight | c_data_toolbar__item_m_label_FontWeight | var(--pf-global--FontWeight--bold) |
| --pf-c-data-toolbar__item--m-label--spacer | c_data_toolbar__item_m_label_spacer | var(--pf-global--spacer--md) |
| --pf-c-data-toolbar__item--m-overflow-menu--spacer | c_data_toolbar__item_m_overflow_menu_spacer | var(--pf-global--spacer--md) |
| --pf-c-data-toolbar__item--m-search-filter--spacer | c_data_toolbar__item_m_search_filter_spacer | var(--pf-global--spacer--sm) |
| --pf-c-data-toolbar__item--m-separator--BackgroundColor | c_data_toolbar__item_m_separator_BackgroundColor | var(--pf-global--BorderColor--dark-100) |
| --pf-c-data-toolbar__item--m-separator--Height | c_data_toolbar__item_m_separator_Height | var(--pf-global--FontSize--lg) |
| --pf-c-data-toolbar__item--m-separator--spacer | c_data_toolbar__item_m_separator_spacer | var(--pf-global--spacer--md) |
| --pf-c-data-toolbar__item--m-separator--Width | c_data_toolbar__item_m_separator_Width | var(--pf-global--BorderWidth--md) |
| --pf-c-data-toolbar__item--spacer | c_data_toolbar__item_spacer | var(--pf-global--spacer--md) |
| --pf-c-data-toolbar__toggle--m-expanded__c-button--m-plain--Color | c_data_toolbar__toggle_m_expanded__c_button_m_plain_Color | var(--pf-global--Color--dark-100) |
| --pf-c-data-toolbar--BackgroundColor | c_data_toolbar_BackgroundColor | var(--pf-global--BackgroundColor--light-100) |
| --pf-c-data-toolbar--PaddingBottom | c_data_toolbar_PaddingBottom | var(--pf-global--spacer--md) |
| --pf-c-data-toolbar--PaddingTop | c_data_toolbar_PaddingTop | var(--pf-global--spacer--md) |
| --pf-c-data-toolbar--RowGap | c_data_toolbar_RowGap | var(--pf-global--spacer--lg) |
| --pf-c-data-toolbar--spacer | c_data_toolbar_spacer | var(--pf-global--spacer--lg) |
| --pf-c-data-toolbar--spacer--base | c_data_toolbar_spacer_base | var(--pf-global--spacer--md) |
