@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
872 lines (859 loc) • 102 kB
Markdown
---
id: Toolbar
section: demos
---
import './Toolbar.css'
## Demos
### Toolbar attribute value search filter desktop
```html
<div class="pf-c-toolbar" id="toolbar-attribute-value-search-filter-desktop-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">
<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-attribute-value-search-filter-desktop-example-expandable-content">
<i class="fas fa-filter" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item pf-m-search-filter">
<div class="pf-c-input-group">
<div class="pf-c-select" style='width: 150px'>
<span id="toolbar-attribute-value-search-filter-desktop-example-select-name-label" hidden>Choose one</span>
<button class="pf-c-select__toggle" type="button" id="toolbar-attribute-value-search-filter-desktop-example-select-name-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label toolbar-attribute-value-search-filter-desktop-example-select-name-toggle">
<div class="pf-c-select__toggle-wrapper">
<span class="pf-c-select__toggle-icon">
<i class="fas fa-filter" aria-hidden="true"></i>
</span>
<span class="pf-c-select__toggle-text">Name</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-attribute-value-search-filter-desktop-example-select-name-label" hidden style='width: 150px'>
<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>
<input class="pf-c-form-control" id="toolbar-attribute-value-search-filter-desktop-example-textInput11" name="textInput11" type="search" placeholder="Filter by name..." aria-label="Search input example" />
<button class="pf-c-button pf-m-control" type="button" aria-label="Search button for search input">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__item pf-m-overflow-menu ">
<div class="pf-c-overflow-menu" id="toolbar-attribute-value-search-filter-desktop-example-overflow-menu">
<div class="pf-c-overflow-menu__content">
<div class="pf-c-overflow-menu__group pf-m-button-group">
<div class="pf-c-overflow-menu__item">
<button class="pf-c-button pf-m-primary" type="button">Primary</button>
</div>
<div class="pf-c-overflow-menu__item">
<button class="pf-c-button pf-m-secondary" type="button">Secondary</button>
</div>
</div>
</div>
<div class="pf-c-overflow-menu__control">
<div class="pf-c-dropdown">
<button class="pf-c-button pf-c-dropdown__toggle pf-m-plain" type="button" id="toolbar-attribute-value-search-filter-desktop-example-overflow-menu-dropdown-toggle" aria-label="Overflow menu">
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
<ul class="pf-c-dropdown__menu" aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-overflow-menu-dropdown-toggle" hidden>
<li>
<button class="pf-c-dropdown__menu-item">Tertiary</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__item pf-m-pagination ">
<div class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-options-menu">
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
<span class="pf-c-options-menu__toggle-text">
<b>1 - 10</b> of
<b>37</b>
</span>
<button class="pf-c-options-menu__toggle-button" id="pagination-options-menu-bottom-example-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page">
<span class="pf-c-options-menu__toggle-button-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
</div>
<ul class="pf-c-options-menu__menu" aria-labelledby="pagination-options-menu-bottom-example-toggle" hidden>
<li>
<button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">10 per page
<div class="pf-c-options-menu__menu-item-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</div>
</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
</li>
</ul>
</div>
<nav class="pf-c-pagination__nav" aria-label="Pagination">
<div class="pf-c-pagination__nav-control pf-m-prev">
<button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-pagination__nav-control pf-m-next">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__expandable-content pf-m-hidden" id="toolbar-attribute-value-search-filter-desktop-example-expandable-content" hidden></div>
</div>
</div>
```
### Toolbar attribute value search filter on mobile
```html
<div class="pf-c-toolbar" id="toolbar-attribute-value-search-filter-mobile-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-attribute-value-search-filter-mobile-example-expandable-content">
<i class="fas fa-filter" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-c-toolbar__item pf-m-overflow-menu ">
<div class="pf-c-overflow-menu" id="toolbar-attribute-value-search-filter-mobile-example-overflow-menu">
<div class="pf-c-overflow-menu__control">
<div class="pf-c-dropdown">
<button class="pf-c-button pf-c-dropdown__toggle pf-m-plain" type="button" id="toolbar-attribute-value-search-filter-mobile-example-overflow-menu-dropdown-toggle" aria-label="Overflow menu">
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
<ul class="pf-c-dropdown__menu" aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-overflow-menu-dropdown-toggle" hidden>
<li>
<button class="pf-c-dropdown__menu-item">Primary</button>
</li>
<li>
<button class="pf-c-dropdown__menu-item">Secondary</button>
</li>
<li>
<button class="pf-c-dropdown__menu-item">Tertiary</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__item pf-m-pagination ">
<div class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-options-menu">
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
<span class="pf-c-options-menu__toggle-text">
<b>1 - 10</b> of
<b>37</b>
</span>
<button class="pf-c-options-menu__toggle-button" id="pagination-options-menu-bottom-example-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page">
<span class="pf-c-options-menu__toggle-button-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
</div>
<ul class="pf-c-options-menu__menu" aria-labelledby="pagination-options-menu-bottom-example-toggle" hidden>
<li>
<button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">10 per page
<div class="pf-c-options-menu__menu-item-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</div>
</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
</li>
</ul>
</div>
<nav class="pf-c-pagination__nav" aria-label="Pagination">
<div class="pf-c-pagination__nav-control pf-m-prev">
<button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-pagination__nav-control pf-m-next">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__expandable-content pf-m-expanded" id="toolbar-attribute-value-search-filter-mobile-example-expandable-content">
<div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item">
<div class="pf-c-input-group">
<div class="pf-c-select" style='width: 150px'>
<span id="toolbar-attribute-value-search-filter-mobile-example-select-name-expanded-label" hidden>Choose one</span>
<button class="pf-c-select__toggle" type="button" id="toolbar-attribute-value-search-filter-mobile-example-select-name-expanded-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-expanded-label toolbar-attribute-value-search-filter-mobile-example-select-name-expanded-toggle">
<div class="pf-c-select__toggle-wrapper">
<span class="pf-c-select__toggle-icon">
<i class="fas fa-filter" aria-hidden="true"></i>
</span>
<span class="pf-c-select__toggle-text">Name</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-attribute-value-search-filter-mobile-example-select-name-expanded-label" hidden style='width: 150px'>
<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>
<input class="pf-c-form-control" id="toolbar-attribute-value-search-filter-mobile-example-textInput12" name="textInput11" type="search" placeholder="Filter by name..." aria-label="Search input example" />
<button class="pf-c-button pf-m-control" type="button" aria-label="Search button for search input">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
```
### Toolbar attribute value single select filter desktop
```html
<div class="pf-c-toolbar" id="toolbar-attribute-value-single-select-filter-desktop-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">
<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-attribute-value-single-select-filter-desktop-example-expandable-content">
<i class="fas fa-filter" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item">
<div class="pf-c-select" style='width: 150px'>
<span id="toolbar-attribute-value-single-select-filter-desktop-example-select-status-label" hidden>Choose one</span>
<button class="pf-c-select__toggle" type="button" id="toolbar-attribute-value-single-select-filter-desktop-example-select-status-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-select-status-label toolbar-attribute-value-single-select-filter-desktop-example-select-status-toggle">
<div class="pf-c-select__toggle-wrapper">
<span class="pf-c-select__toggle-icon">
<i class="fas fa-filter" aria-hidden="true"></i>
</span>
<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>
<ul class="pf-c-select__menu" aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-select-status-label" hidden style='width: 150px'>
<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 pf-m-expanded" style='width: 200px'>
<span id="toolbar-attribute-value-single-select-filter-desktop-example-select-status-two-label" hidden>Choose one</span>
<button class="pf-c-select__toggle" type="button" id="toolbar-attribute-value-single-select-filter-desktop-example-select-status-two-toggle" aria-haspopup="true" aria-expanded="true" aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-select-status-two-label toolbar-attribute-value-single-select-filter-desktop-example-select-status-two-toggle">
<div class="pf-c-select__toggle-wrapper">
<span class="pf-c-select__toggle-text">Stopped</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-attribute-value-single-select-filter-desktop-example-select-status-two-label" style='width: 200px'>
<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>
<div class="pf-c-toolbar__item pf-m-overflow-menu ">
<div class="pf-c-overflow-menu" id="toolbar-attribute-value-single-select-filter-desktop-example-overflow-menu">
<div class="pf-c-overflow-menu__content">
<div class="pf-c-overflow-menu__group pf-m-button-group">
<div class="pf-c-overflow-menu__item">
<button class="pf-c-button pf-m-primary" type="button">Primary</button>
</div>
<div class="pf-c-overflow-menu__item">
<button class="pf-c-button pf-m-secondary" type="button">Secondary</button>
</div>
</div>
</div>
<div class="pf-c-overflow-menu__control">
<div class="pf-c-dropdown">
<button class="pf-c-button pf-c-dropdown__toggle pf-m-plain" type="button" id="toolbar-attribute-value-single-select-filter-desktop-example-overflow-menu-dropdown-toggle" aria-label="Overflow menu">
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
<ul class="pf-c-dropdown__menu" aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-overflow-menu-dropdown-toggle" hidden>
<li>
<button class="pf-c-dropdown__menu-item">Tertiary</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__item pf-m-pagination ">
<div class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-options-menu">
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
<span class="pf-c-options-menu__toggle-text">
<b>1 - 10</b> of
<b>37</b>
</span>
<button class="pf-c-options-menu__toggle-button" id="pagination-options-menu-bottom-example-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page">
<span class="pf-c-options-menu__toggle-button-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
</div>
<ul class="pf-c-options-menu__menu" aria-labelledby="pagination-options-menu-bottom-example-toggle" hidden>
<li>
<button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">10 per page
<div class="pf-c-options-menu__menu-item-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</div>
</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
</li>
</ul>
</div>
<nav class="pf-c-pagination__nav" aria-label="Pagination">
<div class="pf-c-pagination__nav-control pf-m-prev">
<button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-pagination__nav-control pf-m-next">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__expandable-content pf-m-hidden" id="toolbar-attribute-value-single-select-filter-desktop-example-expandable-content" hidden></div>
</div>
</div>
```
### Toolbar attribute value single select filter on mobile
```html
<div class="pf-c-toolbar" id="toolbar-attribute-value-single-select-filter-mobile-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-attribute-value-single-select-filter-mobile-example-expandable-content">
<i class="fas fa-filter" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-c-toolbar__item pf-m-overflow-menu ">
<div class="pf-c-overflow-menu" id="toolbar-attribute-value-single-select-filter-mobile-example-overflow-menu">
<div class="pf-c-overflow-menu__control">
<div class="pf-c-dropdown">
<button class="pf-c-button pf-c-dropdown__toggle pf-m-plain" type="button" id="toolbar-attribute-value-single-select-filter-mobile-example-overflow-menu-dropdown-toggle" aria-label="Overflow menu">
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
<ul class="pf-c-dropdown__menu" aria-labelledby="toolbar-attribute-value-single-select-filter-mobile-example-overflow-menu-dropdown-toggle" hidden>
<li>
<button class="pf-c-dropdown__menu-item">Primary</button>
</li>
<li>
<button class="pf-c-dropdown__menu-item">Secondary</button>
</li>
<li>
<button class="pf-c-dropdown__menu-item">Tertiary</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__item pf-m-pagination ">
<div class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-options-menu">
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
<span class="pf-c-options-menu__toggle-text">
<b>1 - 10</b> of
<b>37</b>
</span>
<button class="pf-c-options-menu__toggle-button" id="pagination-options-menu-bottom-example-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page">
<span class="pf-c-options-menu__toggle-button-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
</div>
<ul class="pf-c-options-menu__menu" aria-labelledby="pagination-options-menu-bottom-example-toggle" hidden>
<li>
<button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">10 per page
<div class="pf-c-options-menu__menu-item-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</div>
</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
</li>
</ul>
</div>
<nav class="pf-c-pagination__nav" aria-label="Pagination">
<div class="pf-c-pagination__nav-control pf-m-prev">
<button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-pagination__nav-control pf-m-next">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__expandable-content pf-m-expanded" id="toolbar-attribute-value-single-select-filter-mobile-example-expandable-content">
<div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item">
<div class="pf-c-select">
<span id="toolbar-attribute-value-single-select-filter-mobile-example-select-status-expanded-label" hidden>Choose one</span>
<button class="pf-c-select__toggle" type="button" id="toolbar-attribute-value-single-select-filter-mobile-example-select-status-expanded-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-attribute-value-single-select-filter-mobile-example-select-status-expanded-label toolbar-attribute-value-single-select-filter-mobile-example-select-status-expanded-toggle">
<div class="pf-c-select__toggle-wrapper">
<span class="pf-c-select__toggle-icon">
<i class="fas fa-filter" aria-hidden="true"></i>
</span>
<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>
<ul class="pf-c-select__menu" aria-labelledby="toolbar-attribute-value-single-select-filter-mobile-example-select-status-expanded-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 pf-m-expanded">
<span id="toolbar-attribute-value-single-select-filter-mobile-example-select-status-two-expanded-label" hidden>Choose one</span>
<button class="pf-c-select__toggle" type="button" id="toolbar-attribute-value-single-select-filter-mobile-example-select-status-two-expanded-toggle" aria-haspopup="true" aria-expanded="true" aria-labelledby="toolbar-attribute-value-single-select-filter-mobile-example-select-status-two-expanded-label toolbar-attribute-value-single-select-filter-mobile-example-select-status-two-expanded-toggle">
<div class="pf-c-select__toggle-wrapper">
<span class="pf-c-select__toggle-text">Stopped</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-attribute-value-single-select-filter-mobile-example-select-status-two-expanded-label">
<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>
</div>
</div>
```
### Toolbar attribute value checkbox select filter desktop
```html
<div class="pf-c-toolbar" id="toolbar-attribute-value-checkbox-select-filter-desktop-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">
<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-attribute-value-checkbox-select-filter-desktop-example-expandable-content">
<i class="fas fa-filter" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item">
<div class="pf-c-select" style='width: 150px'>
<span id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-label" hidden>Choose one</span>
<button class="pf-c-select__toggle" type="button" id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-label toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-toggle">
<div class="pf-c-select__toggle-wrapper">
<span class="pf-c-select__toggle-icon">
<i class="fas fa-filter" aria-hidden="true"></i>
</span>
<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>
<ul class="pf-c-select__menu" aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-label" hidden style='width: 150px'>
<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 pf-m-expanded">
<span id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-label" hidden>Choose one</span>
<button class="pf-c-select__toggle" type="button" id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-toggle" aria-haspopup="true" aria-expanded="true" aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-label toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-toggle">
<div class="pf-c-select__toggle-wrapper">
<span class="pf-c-select__toggle-text">Filter by 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">
<fieldset class="pf-c-select__menu-fieldset" aria-label="Select input">
<label class="pf-c-check pf-c-select__menu-item" for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-active">
<input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-active" name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-active" />
<span class="pf-c-check__label">Active</span>
</label>
<label class="pf-c-check pf-c-select__menu-item" for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-cancelled">
<input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-cancelled" name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-cancelled" checked />
<span class="pf-c-check__label">Cancelled</span>
</label>
<label class="pf-c-check pf-c-select__menu-item" for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-paused">
<input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-paused" name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-paused" checked />
<span class="pf-c-check__label">Paused</span>
</label>
<label class="pf-c-check pf-c-select__menu-item" for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-warning">
<input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-warning" name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-warning" />
<span class="pf-c-check__label">Warning</span>
</label>
<label class="pf-c-check pf-c-select__menu-item" for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-restarted">
<input class="pf-c-check__input" type="checkbox" type="checkbox" id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-restarted" name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-restarted" checked />
<span class="pf-c-check__label">Restarted</span>
</label>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__item pf-m-overflow-menu ">
<div class="pf-c-overflow-menu" id="toolbar-attribute-value-checkbox-select-filter-desktop-example-overflow-menu">
<div class="pf-c-overflow-menu__content">
<div class="pf-c-overflow-menu__group pf-m-button-group">
<div class="pf-c-overflow-menu__item">
<button class="pf-c-button pf-m-primary" type="button">Primary</button>
</div>
<div class="pf-c-overflow-menu__item">
<button class="pf-c-button pf-m-secondary" type="button">Secondary</button>
</div>
</div>
</div>
<div class="pf-c-overflow-menu__control">
<div class="pf-c-dropdown">
<button class="pf-c-button pf-c-dropdown__toggle pf-m-plain" type="button" id="toolbar-attribute-value-checkbox-select-filter-desktop-example-overflow-menu-dropdown-toggle" aria-label="Overflow menu">
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
<ul class="pf-c-dropdown__menu" aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-overflow-menu-dropdown-toggle" hidden>
<li>
<button class="pf-c-dropdown__menu-item">Tertiary</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__item pf-m-pagination ">
<div class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-options-menu">
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
<span class="pf-c-options-menu__toggle-text">
<b>1 - 10</b> of
<b>37</b>
</span>
<button class="pf-c-options-menu__toggle-button" id="pagination-options-menu-bottom-example-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page">
<span class="pf-c-options-menu__toggle-button-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
</div>
<ul class="pf-c-options-menu__menu" aria-labelledby="pagination-options-menu-bottom-example-toggle" hidden>
<li>
<button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">10 per page
<div class="pf-c-options-menu__menu-item-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</div>
</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
</li>
</ul>
</div>
<nav class="pf-c-pagination__nav" aria-label="Pagination">
<div class="pf-c-pagination__nav-control pf-m-prev">
<button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-pagination__nav-control pf-m-next">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__expandable-content pf-m-hidden" id="toolbar-attribute-value-checkbox-select-filter-desktop-example-expandable-content" hidden></div>
</div>
<div class="pf-c-toolbar__content pf-m-chip-container">
<div class="pf-c-toolbar__item pf-m-chip-group ">
<div class="pf-c-chip-group pf-m-category">
<span class="pf-c-chip-group__label" aria-hidden="true" id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-group-label">Status</span>
<ul class="pf-c-chip-group__list" role="list" aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-group-label">
<li class="pf-c-chip-group__list-item">
<div class="pf-c-chip">
<span class="pf-c-chip__text" id="chip-one">Cancelled</span>
<button class="pf-c-button pf-m-plain" type="button" aria-labelledby="remove-chip-one chip-one" aria-label="Remove" id="remove-chip-one">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</li>
<li class="pf-c-chip-group__list-item">
<div class="pf-c-chip">
<span class="pf-c-chip__text" id="chip-two">Paused</span>
<button class="pf-c-button pf-m-plain" type="button" aria-labelledby="remove-chip-two chip-two" aria-label="Remove" id="remove-chip-two">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</li>
<li class="pf-c-chip-group__list-item">
<div class="pf-c-chip">
<span class="pf-c-chip__text" id="chip-three">Restarted</span>
<button class="pf-c-button pf-m-plain" type="button" aria-labelledby="remove-chip-three chip-three" aria-label="Remove" id="remove-chip-three">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</li>
</ul>
</div>
</div>
<div class="pf-c-toolbar__item">
<button class="pf-c-button pf-m-link pf-m-inline" type="button">Clear all filters</button>
</div>
</div>
</div>
```
### Toolbar attribute value checkbox select filter on mobile
```html
<div class="pf-c-toolbar" id="toolbar-attribute-value-checkbox-select-filter-mobile-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-attribute-value-checkbox-select-filter-mobile-example-expandable-content">
<i class="fas fa-filter" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-c-toolbar__item pf-m-overflow-menu ">
<div class="pf-c-overflow-menu" id="toolbar-attribute-value-checkbox-select-filter-mobile-example-overflow-menu">
<div class="pf-c-overflow-menu__control">
<div class="pf-c-dropdown">
<button class="pf-c-button pf-c-dropdown__toggle pf-m-plain" type="button" id="toolbar-attribute-value-checkbox-select-filter-mobile-example-overflow-menu-dropdown-toggle" aria-label="Overflow menu">
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
<ul class="pf-c-dropdown__menu" aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-overflow-menu-dropdown-toggle" hidden>
<li>
<button class="pf-c-dropdown__menu-item">Primary</button>
</li>
<li>
<button class="pf-c-dropdown__menu-item">Secondary</button>
</li>
<li>
<button class="pf-c-dropdown__menu-item">Tertiary</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__item pf-m-pagination ">
<div class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-options-menu">
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
<span class="pf-c-options-menu__toggle-text">
<b>1 - 10</b> of
<b>37</b>
</span>
<button class="pf-c-options-menu__toggle-button" id="pagination-options-menu-bottom-example-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page">
<span class="pf-c-options-menu__toggle-button-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
</div>
<ul class="pf-c-options-menu__menu" aria-labelledby="pagination-options-menu-bottom-example-toggle" hidden>
<li>
<button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">10 per page
<div class="pf-c-options-menu__menu-item-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</div>
</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
</li>
</ul>
</div>
<nav class="pf-c-pagination__nav" aria-label="Pagination">
<div class="pf-c-pagination__nav-control pf-m-prev">
<button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-pagination__nav-control pf-m-next">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="pf-c-toolbar__expandable-content pf-m-expanded" id="toolbar-attribute-value-checkbox-select-filter-mobile-example-expandable-content">
<div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item">
<div class="pf-c-select">
<span id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-status-expanded-label" hidden>Choose one</span>
<button class="pf-c-select__toggle" type="button" id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-status-expanded-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-status-expanded-label toolbar-attribute-value-checkbox-select-filter-mobile-example-select-status-expanded-toggle">
<div class="pf-c-select__toggle-wrapper">
<span class="pf-c-select__toggle-icon">
<i class="fas fa-filter" aria-hidden="true"></i>
</span>
<span class="pf-c-select__toggle-text">Status</span>
</div>
<span class="pf-c-select__togg