HTML

Toolbar

ExamplesDocumentationCSS variables

Examples

Toolbar simple

Toolbar simple
Copied to clipboard

Toolbar w/ pagination

Toolbar w/ pagination
Copied to clipboard

Toolbar w/ pagination and expanded menus for bulk selector, sort, action menu, and pagination

Toolbar w/ pagination and expanded menus for bulk selector, sort, action menu, and pagination
Copied to clipboard

Toolbar w/ filter menu expanded

Toolbar w/ filter menu expanded
Copied to clipboard

Toolbar w/ filter menu expanded (checked)

Toolbar w/ filter menu expanded (checked)
Copied to clipboard

Toolbar w/ filter group expanded on mobile (responsive)

Toolbar w/ filter group expanded on mobile (responsive)
Copied to clipboard

Toolbar w/ filter group expanded (checked) on mobile (responsive)

Toolbar w/ filter group expanded (checked) on mobile (responsive)
Copied to clipboard

Documentation

Accessibility

Attribute Applied to Outcome
role or aria pf-c-toolbar accessibility notes.

Usage

Class Applied to Outcome
.pf-c-toolbar <div> Initiates the toolbar component. Required
.pf-c-toolbar__bulk-select .pf-c-dropdown Indicates the bulk select.
.pf-c-toolbar__filter-toggle .pf-c-button.pf-m-plain Indicates the filter toggle button on small screens. Required
.pf-c-toolbar__filter <div> Initiates the filter area. Required
.pf-c-toolbar__sort .pf-c-options-menu Initiates the options menu for sorting options.
.pf-c-toolbar__action-group <div> Initiates the action group. Required. Note - at least one action is required.
.pf-c-toolbar__action-list .pf-c-dropdown Indicates the dropdown for an action list.
.pf-c-pagination <div> Indicates the pagination component.
.pf-c-toolbar__total-items <div> Initiates the currently displayed item count for use when there is no pagination and in mobile. Required
.pf-c-toolbar__filter-list .pf-c-chip-group Indicates the list of currently applied filters. Required
.pf-m-expanded .pf-c-toolbar__filter-toggle Modifies the mobile filter toggle for expanded state.
.pf-m-expanded .pf-c-toolbar__filter Modifies filter for the expanded state on small screens.
.pf-m-expanded .pf-c-toolbar__filter-list Modifies for the expanded state when filters are applied.

CSS variables

--pf-c-toolbar--PaddingBottomc_toolbar_PaddingBottom1rem
--pf-c-toolbar--PaddingLeftc_toolbar_PaddingLeft1.5rem
--pf-c-toolbar--PaddingRightc_toolbar_PaddingRight1.5rem
--pf-c-toolbar--PaddingTopc_toolbar_PaddingTop1rem
--pf-c-toolbar__action-group--child--MarginLeftc_toolbar__action_group_child_MarginLeft1rem
--pf-c-toolbar__action-list--MarginLeftc_toolbar__action_list_MarginLeft0.5rem
--pf-c-toolbar__bulk-select--MarginRightc_toolbar__bulk_select_MarginRight1rem
--pf-c-toolbar__filter--MarginLeftc_toolbar__filter_MarginLeft0
--pf-c-toolbar__filter--MarginTopc_toolbar__filter_MarginTopcalc(1rem + 1rem)
--pf-c-toolbar__filter--action-group--MarginLeftc_toolbar__filter_action_group_MarginLeft2rem
--pf-c-toolbar__filter-list--MarginTopc_toolbar__filter_list_MarginTop1rem
--pf-c-toolbar__filter-list--c-button--MarginLeftc_toolbar__filter_list_c_button_MarginLeft0.5rem
--pf-c-toolbar__filter-toggle--MarginLeftc_toolbar__filter_toggle_MarginLeft1rem
--pf-c-toolbar__filter-toggle--m-expanded--Colorc_toolbar__filter_toggle_m_expanded_Color#151515
--pf-c-toolbar__sort--MarginLeftc_toolbar__sort_MarginLeft0.5rem
--pf-c-toolbar__sort--action-group--MarginLeftc_toolbar__sort_action_group_MarginLeft0.5rem
--pf-c-toolbar__sort--action-list--MarginLeftc_toolbar__sort_action_list_MarginLeft0.5rem
--pf-c-toolbar__total-items--FontSizec_toolbar__total_items_FontSize0.875rem
--pf-c-toolbar--child--MarginLeftc_toolbar_child_MarginLeft0.5rem
--pf-c-toolbar--md--PaddingLeftc_toolbar_md_PaddingLeft1rem
--pf-c-toolbar--md--PaddingRightc_toolbar_md_PaddingRight1rem