@patternfly/patternfly

--- id: Toolbar section: components cssPrefix: pf-c-toolbar --- import './Toolbar.css' ## 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: | Class | CSS Variable | Computed Value | | ---------------------- | ------------------------------- | -------------- | | `.pf-c-toolbar__item` | `--pf-c-toolbar__item--spacer` | `16px` | | `.pf-c-toolbar__group` | `--pf-c-toolbar__group--spacer` | `16px` | ### Toolbar item types | Class | Applied to | Outcome | | --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------ | | `.pf-m-bulk-select` | `.pf-c-toolbar__item` | Initiates bulk select spacing. Spacer value is set to `var(--pf-c-toolbar--m-bulk-select--spacer)`. | | `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. Spacer value is set to `var(--pf-c-toolbar--m-overflow-menu--spacer)`. | | `.pf-m-pagination` | `.pf-c-toolbar__item` | Initiates pagination spacing and margin. Spacer value is set to `var(--pf-c-toolbar--m-pagination--spacer)`. | | `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. Spacer value is set to `var(--pf-c-toolbar--m-search-filter--spacer)`. | ### Modifiers | Class | Applied to | Outcome | | ------------------------------------- | ------------------- | ---------------------------------------------------------------- | | `.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 ```html <div class="pf-c-toolbar" id="toolbar-simple-example"> <div class="pf-c-toolbar__content"> <div class="pf-c-toolbar__content-section"> <div class="pf-c-toolbar__item">Item</div> <div class="pf-c-toolbar__item">Item</div> <div class="pf-c-toolbar__item">Item</div> <hr class="pf-c-divider pf-m-vertical" /> <div class="pf-c-toolbar__group"> <div class="pf-c-toolbar__item">Item</div> <div class="pf-c-toolbar__item">Item</div> <div class="pf-c-toolbar__item">Item</div> </div> <hr class="pf-c-divider pf-m-vertical" /> <div class="pf-c-toolbar__item">Item</div> <div class="pf-c-toolbar__item">Item</div> <div class="pf-c-toolbar__item">Item</div> </div> </div> </div> ``` ### Item types | Class | Applied to | Outcome | | ---------------------- | ---------- | -------------------------------------------------- | | `.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 ```html <div class="pf-c-toolbar" id="toolbar-spacer-example"> <div class="pf-c-toolbar__content"> <div class="pf-c-toolbar__content-section"> <div class="pf-c-toolbar__item pf-m-spacer-none">Item</div> <div class="pf-c-toolbar__item pf-m-spacer-sm">Item</div> <div class="pf-c-toolbar__item pf-m-spacer-md">Item</div> <div class="pf-c-toolbar__item pf-m-spacer-lg">Item</div> <hr class="pf-c-divider pf-m-vertical" /> <div class="pf-c-toolbar__item pf-m-spacer-none pf-m-spacer-sm-on-md pf-m-spacer-md-on-lg pf-m-spacer-lg-on-xl">Item</div> <div class="pf-c-toolbar__item">Item</div> </div> </div> </div> ``` ### Adjusted group spacers ```html <div class="pf-c-toolbar" id="toolbar-group-spacer-example"> <div class="pf-c-toolbar__content"> <div class="pf-c-toolbar__content-section"> <div class="pf-c-toolbar__group pf-m-space-items-lg"> <div class="pf-c-toolbar__item">Item</div> <div class="pf-c-toolbar__item">Item</div> </div> <hr class="pf-c-divider pf-m-vertical" /> <div class="pf-c-toolbar__group pf-m-space-items-none pf-m-space-items-sm-on-md pf-m-space-items-md-on-lg pf-m-space-items-lg-on-xl"> <div class="pf-c-toolbar__item">Item</div> <div class="pf-c-toolbar__item">Item</div> </div> </div> </div> </div> ``` ### Insets ```html <div class="pf-c-toolbar pf-m-inset-none pf-m-inset-md-on-md pf-m-inset-2xl-on-lg" id="toolbar-inset-example"> <div class="pf-c-toolbar__content"> <div class="pf-c-toolbar__content-section"> <div class="pf-c-toolbar__group"> <div class="pf-c-toolbar__item">Item</div> <div class="pf-c-toolbar__item">Item</div> </div> <hr class="pf-c-divider pf-m-vertical" /> <div class="pf-c-toolbar__item">Item</div> <div class="pf-c-toolbar__item">Item</div> </div> </div> </div> ``` ### Page insets ```html <div class="pf-c-toolbar pf-m-page-insets" id="toolbar-page-insets-example"> <div class="pf-c-toolbar__content"> <div class="pf-c-toolbar__content-section"> <div class="pf-c-toolbar__group"> <div class="pf-c-toolbar__item">Item</div> <div class="pf-c-toolbar__item">Item</div> </div> <hr class="pf-c-divider pf-m-vertical" /> <div class="pf-c-toolbar__item">Item</div> <div class="pf-c-toolbar__item">Item</div> </div> </div> </div> ``` ### Toolbar spacers and insets | Class | Applied to | Outcome | | ----------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `.pf-m-page-insets` | `.pf-c-toolbar` | Modifies 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__item` | Modifies toolbar group or item spacing. | | `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing. | | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding. | ### Group types ```html <div class="pf-c-toolbar" id="toolbar-group-types-example"> <div class="pf-c-toolbar__content"> <div class="pf-c-toolbar__content-section"> <div class="pf-c-toolbar__group pf-m-filter-group"> <div class="pf-c-toolbar__item"> <div class="pf-c-select"> <span id="toolbar-group-types-example-select-checkbox-filter1-label" hidden>Choose one</span> <button class="pf-c-select__toggle" type="button" id="toolbar-group-types-example-select-checkbox-filter1-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-group-types-example-select-checkbox-filter1-label toolbar-group-types-example-select-checkbox-filter1-toggle"> <div class="pf-c-select__toggle-wrapper"> <span class="pf-c-select__toggle-text">Filter 1</span> </div> <span class="pf-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <ul class="pf-c-select__menu" aria-labelledby="toolbar-group-types-example-select-checkbox-filter1-label" hidden> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Running</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Stopped</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Down</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Degraded</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Needs Maintenance</button> </li> </ul> </div> </div> <div class="pf-c-toolbar__item"> <div class="pf-c-select"> <span id="toolbar-group-types-example-select-checkbox-filter2-label" hidden>Choose one</span> <button class="pf-c-select__toggle" type="button" id="toolbar-group-types-example-select-checkbox-filter2-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-group-types-example-select-checkbox-filter2-label toolbar-group-types-example-select-checkbox-filter2-toggle"> <div class="pf-c-select__toggle-wrapper"> <span class="pf-c-select__toggle-text">Filter 2</span> </div> <span class="pf-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <ul class="pf-c-select__menu" aria-labelledby="toolbar-group-types-example-select-checkbox-filter2-label" hidden> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Running</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Stopped</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Down</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Degraded</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Needs Maintenance</button> </li> </ul> </div> </div> <div class="pf-c-toolbar__item"> <div class="pf-c-select"> <span id="toolbar-group-types-example-select-checkbox-filter3-label" hidden>Choose one</span> <button class="pf-c-select__toggle" type="button" id="toolbar-group-types-example-select-checkbox-filter3-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-group-types-example-select-checkbox-filter3-label toolbar-group-types-example-select-checkbox-filter3-toggle"> <div class="pf-c-select__toggle-wrapper"> <span class="pf-c-select__toggle-text">Filter 3</span> </div> <span class="pf-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <ul class="pf-c-select__menu" aria-labelledby="toolbar-group-types-example-select-checkbox-filter3-label" hidden> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Running</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Stopped</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Down</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Degraded</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Needs Maintenance</button> </li> </ul> </div> </div> </div> <div class="pf-c-toolbar__group pf-m-icon-button-group"> <div class="pf-c-toolbar__item"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Edit"> <i class="fas fa-edit" aria-hidden="true"></i> </button> </div> <div class="pf-c-toolbar__item"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Clone"> <i class="fas fa-clone" aria-hidden="true"></i> </button> </div> <div class="pf-c-toolbar__item"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Sync"> <i class="fas fa-sync" aria-hidden="true"></i> </button> </div> </div> <div class="pf-c-toolbar__group pf-m-button-group"> <div class="pf-c-toolbar__item"> <button class="pf-c-button pf-m-primary" type="button">Action</button> </div> <div class="pf-c-toolbar__item"> <button class="pf-c-button pf-m-secondary" type="button">Secondary</button> </div> <div class="pf-c-toolbar__item"> <button class="pf-c-button pf-m-tertiary" type="button">Tertiary</button> </div> </div> </div> </div> </div> ``` ### Toolbar group types | Class | Applied to | Outcome | | ------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `.pf-m-filter-group` | `.pf-c-toolbar__group` | Modifies 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__group` | Modifies 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__group` | Modifies 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 ```html <div class="pf-c-toolbar" id="toolbar-toggle-group-example"> <div class="pf-c-toolbar__content"> <div class="pf-c-toolbar__content-section"> <div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg"> <div class="pf-c-toolbar__toggle"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Show filters" aria-expanded="false" aria-controls="toolbar-toggle-group-example-expandable-content"> <i class="fas fa-filter" aria-hidden="true"></i> </button> </div> <div class="pf-c-toolbar__item pf-m-search-filter "> <div class="pf-c-input-group" aria-label="search filter" role="group"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle" type="button" id="toolbar-toggle-group-example-content-button" aria-expanded="false"> <span class="pf-c-dropdown__toggle-text">Name</span> <span class="pf-c-dropdown__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-c-dropdown__menu" hidden>[Panel contents here]</div> </div> <input class="pf-c-form-control" type="search" id="toolbar-toggle-group-example-content-search-filter-input" name="toolbar-toggle-group-example-search-filter-input" aria-label="input with dropdown and button" aria-describedby="toolbar-toggle-group-example-content-button" /> </div> </div> <div class="pf-c-toolbar__group pf-m-filter-group"> <div class="pf-c-toolbar__item"> <div class="pf-c-select"> <span id="toolbar-toggle-group-example-select-checkbox-status-label" hidden>Choose one</span> <button class="pf-c-select__toggle" type="button" id="toolbar-toggle-group-example-select-checkbox-status-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-toggle-group-example-select-checkbox-status-label toolbar-toggle-group-example-select-checkbox-status-toggle"> <div class="pf-c-select__toggle-wrapper"> <span class="pf-c-select__toggle-text">Status</span> </div> <span class="pf-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-c-select__menu" hidden> <fieldset class="pf-c-select__menu-fieldset" aria-label="Select input"> <label class="pf-c-check pf-c-select__menu-item pf-m-description" for="toolbar-toggle-group-example-select-checkbox-status-active"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-example-select-checkbox-status-active" name="toolbar-toggle-group-example-select-checkbox-status-active" /> <span class="pf-c-check__label">Active</span> <div class="pf-c-check__description">This is a description</div> </label> <label class="pf-c-check pf-c-select__menu-item pf-m-description" for="toolbar-toggle-group-example-select-checkbox-status-cancelled"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-example-select-checkbox-status-cancelled" name="toolbar-toggle-group-example-select-checkbox-status-cancelled" /> <span class="pf-c-check__label">Cancelled</span> <div class="pf-c-check__description">This is a really long description that describes the menu item. This is a really long description that describes the menu item.</div> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-toggle-group-example-select-checkbox-status-paused"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-example-select-checkbox-status-paused" name="toolbar-toggle-group-example-select-checkbox-status-paused" /> <span class="pf-c-check__label">Paused</span> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-toggle-group-example-select-checkbox-status-warning"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-example-select-checkbox-status-warning" name="toolbar-toggle-group-example-select-checkbox-status-warning" /> <span class="pf-c-check__label">Warning</span> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-toggle-group-example-select-checkbox-status-restarted"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-example-select-checkbox-status-restarted" name="toolbar-toggle-group-example-select-checkbox-status-restarted" /> <span class="pf-c-check__label">Restarted</span> </label> </fieldset> </div> </div> </div> <div class="pf-c-toolbar__item"> <div class="pf-c-select"> <span id="toolbar-toggle-group-example-select-checkbox-risk-label" hidden>Choose one</span> <button class="pf-c-select__toggle" type="button" id="toolbar-toggle-group-example-select-checkbox-risk-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-toggle-group-example-select-checkbox-risk-label toolbar-toggle-group-example-select-checkbox-risk-toggle"> <div class="pf-c-select__toggle-wrapper"> <span class="pf-c-select__toggle-text">Risk</span> </div> <span class="pf-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-c-select__menu" hidden> <fieldset class="pf-c-select__menu-fieldset" aria-label="Select input"> <label class="pf-c-check pf-c-select__menu-item pf-m-description" for="toolbar-toggle-group-example-select-checkbox-risk-active"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-example-select-checkbox-risk-active" name="toolbar-toggle-group-example-select-checkbox-risk-active" /> <span class="pf-c-check__label">Active</span> <div class="pf-c-check__description">This is a description</div> </label> <label class="pf-c-check pf-c-select__menu-item pf-m-description" for="toolbar-toggle-group-example-select-checkbox-risk-cancelled"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-example-select-checkbox-risk-cancelled" name="toolbar-toggle-group-example-select-checkbox-risk-cancelled" /> <span class="pf-c-check__label">Cancelled</span> <div class="pf-c-check__description">This is a really long description that describes the menu item. This is a really long description that describes the menu item.</div> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-toggle-group-example-select-checkbox-risk-paused"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-example-select-checkbox-risk-paused" name="toolbar-toggle-group-example-select-checkbox-risk-paused" /> <span class="pf-c-check__label">Paused</span> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-toggle-group-example-select-checkbox-risk-warning"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-example-select-checkbox-risk-warning" name="toolbar-toggle-group-example-select-checkbox-risk-warning" /> <span class="pf-c-check__label">Warning</span> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-toggle-group-example-select-checkbox-risk-restarted"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-example-select-checkbox-risk-restarted" name="toolbar-toggle-group-example-select-checkbox-risk-restarted" /> <span class="pf-c-check__label">Restarted</span> </label> </fieldset> </div> </div> </div> </div> </div> </div> <div class="pf-c-toolbar__expandable-content pf-m-hidden" id="toolbar-toggle-group-example-expandable-content" hidden></div> </div> </div> ``` ### Toggle group on mobile (filters collapsed, expandable content expanded) ```html <div class="pf-c-toolbar" id="toolbar-toggle-group-collapsed-example"> <div class="pf-c-toolbar__content"> <div class="pf-c-toolbar__content-section"> <div class="pf-c-toolbar__group pf-m-toggle-group"> <div class="pf-c-toolbar__toggle pf-m-expanded"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Show filters" aria-expanded="true" aria-controls="toolbar-toggle-group-collapsed-example-expandable-content"> <i class="fas fa-filter" aria-hidden="true"></i> </button> </div> </div> </div> <div class="pf-c-toolbar__expandable-content pf-m-expanded" id="toolbar-toggle-group-collapsed-example-expandable-content"> <div class="pf-c-toolbar__item pf-m-search-filter "> <div class="pf-c-input-group" aria-label="search filter" role="group"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle" type="button" id="toolbar-toggle-group-collapsed-example-expandable-content-button" aria-expanded="false"> <span class="pf-c-dropdown__toggle-text">Name</span> <span class="pf-c-dropdown__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-c-dropdown__menu" hidden>[Panel contents here]</div> </div> <input class="pf-c-form-control" type="search" id="toolbar-toggle-group-collapsed-example-expandable-content-search-filter-input" name="toolbar-toggle-group-collapsed-example-search-filter-input" aria-label="input with dropdown and button" aria-describedby="toolbar-toggle-group-collapsed-example-expandable-content-button" /> </div> </div> <div class="pf-c-toolbar__group pf-m-filter-group"> <div class="pf-c-toolbar__item"> <div class="pf-c-select"> <span id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-label" hidden>Choose one</span> <button class="pf-c-select__toggle" type="button" id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-label toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"> <div class="pf-c-select__toggle-wrapper"> <span class="pf-c-select__toggle-text">Status</span> </div> <span class="pf-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-c-select__menu" hidden> <fieldset class="pf-c-select__menu-fieldset" aria-label="Select input"> <label class="pf-c-check pf-c-select__menu-item pf-m-description" for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active" name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active" /> <span class="pf-c-check__label">Active</span> <div class="pf-c-check__description">This is a description</div> </label> <label class="pf-c-check pf-c-select__menu-item pf-m-description" for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-cancelled"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-cancelled" name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-cancelled" /> <span class="pf-c-check__label">Cancelled</span> <div class="pf-c-check__description">This is a really long description that describes the menu item. This is a really long description that describes the menu item.</div> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused" name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused" /> <span class="pf-c-check__label">Paused</span> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning" name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning" /> <span class="pf-c-check__label">Warning</span> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted" name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted" /> <span class="pf-c-check__label">Restarted</span> </label> </fieldset> </div> </div> </div> <div class="pf-c-toolbar__item"> <div class="pf-c-select"> <span id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-label" hidden>Choose one</span> <button class="pf-c-select__toggle" type="button" id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-label toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle"> <div class="pf-c-select__toggle-wrapper"> <span class="pf-c-select__toggle-text">Risk</span> </div> <span class="pf-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-c-select__menu" hidden> <fieldset class="pf-c-select__menu-fieldset" aria-label="Select input"> <label class="pf-c-check pf-c-select__menu-item pf-m-description" for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active" name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active" /> <span class="pf-c-check__label">Active</span> <div class="pf-c-check__description">This is a description</div> </label> <label class="pf-c-check pf-c-select__menu-item pf-m-description" for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-cancelled"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-cancelled" name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-cancelled" /> <span class="pf-c-check__label">Cancelled</span> <div class="pf-c-check__description">This is a really long description that describes the menu item. This is a really long description that describes the menu item.</div> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused" name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused" /> <span class="pf-c-check__label">Paused</span> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning" name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning" /> <span class="pf-c-check__label">Warning</span> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted" name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted" /> <span class="pf-c-check__label">Restarted</span> </label> </fieldset> </div> </div> </div> </div> </div> </div> </div> ``` ### 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-toolbar__item`, `.pf-c-toolbar__group`, `.pf-c-toolbar__toggle`, `.pf-c-toolbar__expandable-content` | Indicates that the toggle group element is hidden. **Required** | | `aria-expanded="true"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates that the expandable content is visible. **Required** | | `aria-expanded="false"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates the the expandable content is hidden. **Required** | | `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** | | `id="[expandable-content_id]"` | `.pf-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** | ### Responsive attributes | Attribute | Applied to | Outcome | | ---------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `aria-haspopup="true"` | `.pf-c-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-toolbar__group.pf-m-toggle-group`, `.pf-c-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-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. | | `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. | ### Selected ### Selected filters on mobile (filters collapsed, selected filters summary visible) ```html <div class="pf-c-toolbar" id="toolbar-selected-filters-toggle-group-collapsed-example"> <div class="pf-c-toolbar__content"> <div class="pf-c-toolbar__content-section"> <div class="pf-c-toolbar__item pf-m-bulk-select"> <div class="pf-c-dropdown"> <div class="pf-c-dropdown__toggle pf-m-split-button"> <label class="pf-c-dropdown__toggle-check" for="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"> <input type="checkbox" id="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check" aria-label="Select all" /> </label> <button class="pf-c-dropdown__toggle-button" type="button" aria-expanded="false" id="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-button" aria-label="Select"> <i class="fas fa-caret-down" aria-hidden="true"></i> </button> </div> <ul class="pf-c-dropdown__menu" aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-button" hidden> <li> <button class="pf-c-dropdown__menu-item" type="button">Select all</button> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Select none</button> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Other action</button> </li> </ul> </div> </div> <div class="pf-c-toolbar__group pf-m-toggle-group"> <div class="pf-c-toolbar__toggle"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Show filters" aria-expanded="false" aria-controls="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"> <i class="fas fa-filter" aria-hidden="true"></i> </button> </div> <div class="pf-c-toolbar__item pf-m-search-filter "> <div class="pf-c-input-group" aria-label="search filter" role="group"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle" type="button" id="toolbar-selected-filters-toggle-group-collapsed-example-content-button" aria-expanded="false"> <span class="pf-c-dropdown__toggle-text">Name</span> <span class="pf-c-dropdown__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-c-dropdown__menu" hidden>[Panel contents here]</div> </div> <input class="pf-c-form-control" type="search" id="toolbar-selected-filters-toggle-group-collapsed-example-content-search-filter-input" name="toolbar-selected-filters-toggle-group-collapsed-example-search-filter-input" aria-label="input with dropdown and button" aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-content-button" /> </div> </div> <div class="pf-c-toolbar__group pf-m-filter-group"> <div class="pf-c-toolbar__item"> <div class="pf-c-select"> <span id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-label" hidden>Choose one</span> <button class="pf-c-select__toggle" type="button" id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-label toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"> <div class="pf-c-select__toggle-wrapper"> <span class="pf-c-select__toggle-text">Status</span> </div> <span class="pf-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-c-select__menu" hidden> <fieldset class="pf-c-select__menu-fieldset" aria-label="Select input"> <label class="pf-c-check pf-c-select__menu-item pf-m-description" for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active" name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active" /> <span class="pf-c-check__label">Active</span> <div class="pf-c-check__description">This is a description</div> </label> <label class="pf-c-check pf-c-select__menu-item pf-m-description" for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-cancelled"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-cancelled" name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-cancelled" /> <span class="pf-c-check__label">Cancelled</span> <div class="pf-c-check__description">This is a really long description that describes the menu item. This is a really long description that describes the menu item.</div> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused" name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused" /> <span class="pf-c-check__label">Paused</span> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning" name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning" /> <span class="pf-c-check__label">Warning</span> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted" name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted" /> <span class="pf-c-check__label">Restarted</span> </label> </fieldset> </div> </div> </div> <div class="pf-c-toolbar__item"> <div class="pf-c-select"> <span id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-label" hidden>Choose one</span> <button class="pf-c-select__toggle" type="button" id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-label toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle"> <div class="pf-c-select__toggle-wrapper"> <span class="pf-c-select__toggle-text">Risk</span> </div> <span class="pf-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-c-select__menu" hidden> <fieldset class="pf-c-select__menu-fieldset" aria-label="Select input"> <label class="pf-c-check pf-c-select__menu-item pf-m-description" for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active" name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active" /> <span class="pf-c-check__label">Active</span> <div class="pf-c-check__description">This is a description</div> </label> <label class="pf-c-check pf-c-select__menu-item pf-m-description" for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-cancelled"> <input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-cancelled" name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-cancelled" /> <span class="pf-c-check__label">Cancelled</span> <div class="pf-c-check__description">This is a really long description that describes the menu item. This is a really long description that describes the menu item.</div> </label> <label class="pf-c-check pf-c-select__menu-item" for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"> <input class="pf-c-chec