---
id: Toolbar
section: components
---import './Toolbar.css'

## Demos

### Toolbar attribute value search filter on desktop

```html
<div
  class="pf-v6-c-toolbar"
  id="toolbar-attribute-value-search-filter-desktop-example"
>
  <div class="pf-v6-c-toolbar__content">
    <div class="pf-v6-c-toolbar__content-section">
      <div class="pf-v6-c-toolbar__group pf-m-show pf-m-toggle-group">
        <div class="pf-v6-c-toolbar__toggle">
          <button
            class="pf-v6-c-menu-toggle pf-m-plain"
            type="button"
            aria-expanded="false"
            aria-label="Show filters"
            aria-controls="toolbar-attribute-value-search-filter-desktop-example-expandable-content"
          >
            <span class="pf-v6-c-menu-toggle__icon">
              <i class="fas fa-filter" aria-hidden="true"></i>
            </span>
          </button>
        </div>
        <div class="pf-v6-c-toolbar__item">
          <div
            class="pf-v6-c-input-group"
            aria-label="search filter"
            role="group"
          >
            <div class="pf-v6-c-input-group__item">
              <button
                class="pf-v6-c-menu-toggle"
                type="button"
                aria-expanded="false"
                id="toolbar-attribute-value-search-filter-desktop-example-search-filter-menu"
              >
                <span class="pf-v6-c-menu-toggle__text">Name</span>
                <span class="pf-v6-c-menu-toggle__controls">
                  <span class="pf-v6-c-menu-toggle__toggle-icon">
                    <i class="fas fa-caret-down" aria-hidden="true"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="pf-v6-c-input-group__item pf-m-fill">
              <div class="pf-v6-c-text-input-group">
                <div class="pf-v6-c-text-input-group__main pf-m-icon">
                  <span class="pf-v6-c-text-input-group__text">
                    <span class="pf-v6-c-text-input-group__icon">
                      <i class="fas fa-fw fa-search"></i>
                    </span>
                    <input
                      class="pf-v6-c-text-input-group__text-input"
                      type="text"
                      placeholder="Find by name"
                      value
                      aria-label="Search input"
                    />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="pf-v6-c-toolbar__item">
        <div
          class="pf-v6-c-overflow-menu"
          id="toolbar-attribute-value-search-filter-desktop-example--overflow-menu"
        >
          <div class="pf-v6-c-overflow-menu__content">
            <div class="pf-v6-c-overflow-menu__group pf-m-button-group">
              <div class="pf-v6-c-overflow-menu__item">
                <button class="pf-v6-c-button pf-m-primary" type="button">
                  <span class="pf-v6-c-button__text">Primary</span>
                </button>
              </div>
              <div class="pf-v6-c-overflow-menu__item">
                <button class="pf-v6-c-button pf-m-secondary" type="button">
                  <span class="pf-v6-c-button__text">Secondary</span>
                </button>
              </div>
            </div>
          </div>
          <div class="pf-v6-c-overflow-menu__control">
            <button
              class="pf-v6-c-menu-toggle pf-m-plain"
              type="button"
              aria-expanded="false"
              aria-label="Menu toggle"
              id="toolbar-attribute-value-search-filter-desktop-example-overflow-toggle"
            >
              <span class="pf-v6-c-menu-toggle__icon">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
              </span>
            </button>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-toolbar__item pf-m-pagination">
        <div
          class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
        >
          <div
            class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
          >
            <div class="pf-v6-c-pagination__page-menu">
              <button
                class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
                type="button"
                aria-expanded="false"
                aria-label="Menu toggle"
                id="toolbar-attribute-value-search-filter-desktop-example-pagination-menu-toggle"
              >
                <span class="pf-v6-c-menu-toggle__text">
                  <b>1 - 10</b>&nbsp;of&nbsp;
                  <b>36</b>
                </span>
                <span class="pf-v6-c-menu-toggle__controls">
                  <span class="pf-v6-c-menu-toggle__toggle-icon">
                    <i class="fas fa-caret-down" aria-hidden="true"></i>
                  </span>
                </span>
              </button>
            </div>
            <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
              <div class="pf-v6-c-pagination__nav-control pf-m-prev">
                <button
                  class="pf-v6-c-button pf-m-plain"
                  type="button"
                  disabled
                  aria-label="Go to previous page"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
              <div class="pf-v6-c-pagination__nav-control pf-m-next">
                <button
                  class="pf-v6-c-button pf-m-plain"
                  type="button"
                  aria-label="Go to next page"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-angle-right" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>

    <div
      class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
      id="toolbar-attribute-value-search-filter-desktop-example-expandable-content"
      hidden
    ></div>
  </div>
</div>

```

### Toolbar with validation on desktop

```hbs isFullscreen
{{> page-template page-template--id="toolbar-pagination-management-example"}}

{{#* inline "page-template-main-content"}}
  {{> page-template-breadcrumb}}
  {{> page-template-title}}
  {{#> page-main-section page-main-section--ExcludeMainBody=true}}
    {{#> page-main-body}}
      {{#> toolbar toolbar--id="toolbar-with-validation-example"}}
        {{#> toolbar-content}}
          {{#> toolbar-content-section}}
            {{#> toolbar-group toolbar-group--IsToggleGroup=true toolbar-group--modifier="pf-m-show-on-lg"}}
              {{> toolbar-toggle}}
              {{#> toolbar-group  toolbar-group--IsFilterGroup=true reset='toolbar-group--IsToggleGroup'}}
                {{#> toolbar-item}}
                  {{#> input-group input-group--attribute=(concat 'aria-label="search filter" role="group"')}}
                    {{#> input-group-item}}
                      {{> menu-toggle menu-toggle--id=(concat toolbar--id '-month') menu-toggle--text='Last month'}}
                    {{/input-group-item}}
                    {{#> input-group-item}}
                      {{#> date-picker date-picker--id=(concat toolbar--id '-helper-text') helper-text--value='MM/DD/YYYY'}}
                        {{#> input-group}}
                          {{> form-control
                              controlType='input'
                              input=true
                              form-control--attribute=(concat 'type="text" value="2020-03-05" id="' date-picker--id '-input" name="' date-picker--id '-input" aria-label="Date picker"')
                            }}
                          {{> button button--IsControl=true button--IsIcon=true button--icon="calendar-alt" button--aria-label="Toggle date picker"}}
                        {{/input-group}}
                      {{/date-picker}}
                    {{/input-group-item}}
                    {{#> input-group-item}}
                      {{#> date-picker
                            date-picker--id=(concat toolbar--id '-invalid') helper-text--value="Max: 08/10/2022" helper-text--IsError=true}}
                        {{#> input-group}}
                          {{> form-control
                              input=true
                              form-control--IsError=true
                              controlType='input'
                              form-control--attribute=(concat 'aria-invalid=true type="text" value="2020-03-05" id="'
                              date-picker--id '-input" name="'
                              date-picker--id '-input" aria-label="Date picker"')
                            }}
                          {{> button button--IsControl=true button--IsIcon=true button--icon="calendar-alt" button--aria-label="Toggle date picker"}}
                        {{/input-group}}
                        {{> date-picker-helper-text helper-text--value="MM/DD/YYYY" helper-text--IsError=false}}
                      {{/date-picker}}
                    {{/input-group-item}}
                  {{/input-group}}
                {{/toolbar-item}}
              {{/toolbar-group}}
              {{> toolbar-group-search}}
            {{/toolbar-group}}
            {{#> button button--IsPrimary=true}}
              Download
            {{/button}}
          {{/toolbar-content-section}}
          {{> toolbar-expandable-content}}
        {{/toolbar-content}}
      {{/toolbar}}
    {{/page-main-body}}
    {{#> page-main-body}}
      {{> table-simple-table page--id=(concat toolbar--id '-table')}}
    {{/page-main-body}}
  {{/page-main-section}}
{{/inline}}
```

### Toolbar attribute value search filter on mobile

```html
<div
  class="pf-v6-c-toolbar"
  id="toolbar-attribute-value-search-filter-mobile-example"
>
  <div class="pf-v6-c-toolbar__content">
    <div class="pf-v6-c-toolbar__content-section">
      <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
        <div class="pf-v6-c-toolbar__toggle">
          <button
            class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
            type="button"
            aria-expanded="true"
            aria-label="Show filters"
            aria-controls="toolbar-attribute-value-search-filter-mobile-example-expandable-content"
          >
            <span class="pf-v6-c-menu-toggle__icon">
              <i class="fas fa-filter" aria-hidden="true"></i>
            </span>
          </button>
        </div>
        <div class="pf-v6-c-toolbar__item">
          <div
            class="pf-v6-c-input-group"
            aria-label="search filter"
            role="group"
          >
            <div class="pf-v6-c-input-group__item">
              <button
                class="pf-v6-c-menu-toggle"
                type="button"
                aria-expanded="false"
                id="toolbar-attribute-value-search-filter-mobile-example-search-filter-menu"
              >
                <span class="pf-v6-c-menu-toggle__text">Name</span>
                <span class="pf-v6-c-menu-toggle__controls">
                  <span class="pf-v6-c-menu-toggle__toggle-icon">
                    <i class="fas fa-caret-down" aria-hidden="true"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="pf-v6-c-input-group__item pf-m-fill">
              <div class="pf-v6-c-text-input-group">
                <div class="pf-v6-c-text-input-group__main pf-m-icon">
                  <span class="pf-v6-c-text-input-group__text">
                    <span class="pf-v6-c-text-input-group__icon">
                      <i class="fas fa-fw fa-search"></i>
                    </span>
                    <input
                      class="pf-v6-c-text-input-group__text-input"
                      type="text"
                      placeholder="Find by name"
                      value
                      aria-label="Search input"
                    />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group">
          <div class="pf-v6-c-toolbar__item">
            <button
              class="pf-v6-c-menu-toggle"
              type="button"
              aria-expanded="false"
              id="toolbar-attribute-value-search-filter-mobile-example-menu-toggle-checkbox-status"
            >
              <span class="pf-v6-c-menu-toggle__text">Status</span>
              <span class="pf-v6-c-menu-toggle__controls">
                <span class="pf-v6-c-menu-toggle__toggle-icon">
                  <i class="fas fa-caret-down" aria-hidden="true"></i>
                </span>
              </span>
            </button>
          </div>
          <div class="pf-v6-c-toolbar__item">
            <button
              class="pf-v6-c-menu-toggle"
              type="button"
              aria-expanded="false"
              id="toolbar-attribute-value-search-filter-mobile-example-menu-toggle-checkbox-risk"
            >
              <span class="pf-v6-c-menu-toggle__text">Risk</span>
              <span class="pf-v6-c-menu-toggle__controls">
                <span class="pf-v6-c-menu-toggle__toggle-icon">
                  <i class="fas fa-caret-down" aria-hidden="true"></i>
                </span>
              </span>
            </button>
          </div>
        </div>
      </div>

      <div class="pf-v6-c-toolbar__item">
        <div
          class="pf-v6-c-overflow-menu"
          id="toolbar-attribute-value-search-filter-mobile-example--overflow-menu"
        >
          <div class="pf-v6-c-overflow-menu__control">
            <button
              class="pf-v6-c-menu-toggle pf-m-plain"
              type="button"
              aria-expanded="false"
              aria-label="Menu toggle"
              id="toolbar-attribute-value-search-filter-mobile-example-overflow-toggle"
            >
              <span class="pf-v6-c-menu-toggle__icon">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
              </span>
            </button>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-toolbar__item pf-m-pagination">
        <div
          class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
        >
          <div
            class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
          >
            <div class="pf-v6-c-pagination__page-menu">
              <button
                class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
                type="button"
                aria-expanded="false"
                aria-label="Menu toggle"
                id="toolbar-attribute-value-search-filter-mobile-example-pagination-menu-toggle"
              >
                <span class="pf-v6-c-menu-toggle__text">
                  <b>1 - 10</b>&nbsp;of&nbsp;
                  <b>36</b>
                </span>
                <span class="pf-v6-c-menu-toggle__controls">
                  <span class="pf-v6-c-menu-toggle__toggle-icon">
                    <i class="fas fa-caret-down" aria-hidden="true"></i>
                  </span>
                </span>
              </button>
            </div>
            <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
              <div class="pf-v6-c-pagination__nav-control pf-m-prev">
                <button
                  class="pf-v6-c-button pf-m-plain"
                  type="button"
                  disabled
                  aria-label="Go to previous page"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
              <div class="pf-v6-c-pagination__nav-control pf-m-next">
                <button
                  class="pf-v6-c-button pf-m-plain"
                  type="button"
                  aria-label="Go to next page"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-angle-right" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>

    <div
      class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
      id="toolbar-attribute-value-search-filter-mobile-example-expandable-content"
    >
      <div class="pf-v6-c-toolbar__item">
        <div
          class="pf-v6-c-input-group"
          aria-label="search filter"
          role="group"
        >
          <div class="pf-v6-c-input-group__item">
            <button
              class="pf-v6-c-menu-toggle"
              type="button"
              aria-expanded="false"
              id="toolbar-attribute-value-search-filter-mobile-example-expandable-search-filter-menu"
            >
              <span class="pf-v6-c-menu-toggle__text">Name</span>
              <span class="pf-v6-c-menu-toggle__controls">
                <span class="pf-v6-c-menu-toggle__toggle-icon">
                  <i class="fas fa-caret-down" aria-hidden="true"></i>
                </span>
              </span>
            </button>
          </div>
          <div class="pf-v6-c-input-group__item pf-m-fill">
            <div class="pf-v6-c-text-input-group">
              <div class="pf-v6-c-text-input-group__main pf-m-icon">
                <span class="pf-v6-c-text-input-group__text">
                  <span class="pf-v6-c-text-input-group__icon">
                    <i class="fas fa-fw fa-search"></i>
                  </span>
                  <input
                    class="pf-v6-c-text-input-group__text-input"
                    type="text"
                    placeholder="Find by name"
                    value
                    aria-label="Search input"
                  />
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

```

### Toolbar attribute value single select filter on desktop

```html
<div
  class="pf-v6-c-toolbar"
  id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example"
>
  <div class="pf-v6-c-toolbar__content">
    <div class="pf-v6-c-toolbar__content-section">
      <div class="pf-v6-c-toolbar__group pf-m-filter-group">
        <div class="pf-v6-c-toolbar__item">
          <button
            class="pf-v6-c-menu-toggle"
            type="button"
            aria-expanded="false"
            id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-menu-toggle-checkbox-status"
          >
            <span class="pf-v6-c-menu-toggle__text">Status</span>
            <span class="pf-v6-c-menu-toggle__controls">
              <span class="pf-v6-c-menu-toggle__toggle-icon">
                <i class="fas fa-caret-down" aria-hidden="true"></i>
              </span>
            </span>
          </button>
        </div>
        <div class="pf-v6-c-toolbar__item">
          <button
            class="pf-v6-c-menu-toggle"
            type="button"
            aria-expanded="false"
            id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-menu-toggle-checkbox-risk"
          >
            <span class="pf-v6-c-menu-toggle__text">Risk</span>
            <span class="pf-v6-c-menu-toggle__controls">
              <span class="pf-v6-c-menu-toggle__toggle-icon">
                <i class="fas fa-caret-down" aria-hidden="true"></i>
              </span>
            </span>
          </button>
        </div>
      </div>

      <div class="pf-v6-c-toolbar__item">
        <div
          class="pf-v6-c-overflow-menu"
          id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example--overflow-menu"
        >
          <div class="pf-v6-c-overflow-menu__content">
            <div class="pf-v6-c-overflow-menu__group pf-m-button-group">
              <div class="pf-v6-c-overflow-menu__item">
                <button class="pf-v6-c-button pf-m-primary" type="button">
                  <span class="pf-v6-c-button__text">Primary</span>
                </button>
              </div>
              <div class="pf-v6-c-overflow-menu__item">
                <button class="pf-v6-c-button pf-m-secondary" type="button">
                  <span class="pf-v6-c-button__text">Secondary</span>
                </button>
              </div>
            </div>
          </div>
          <div class="pf-v6-c-overflow-menu__control">
            <button
              class="pf-v6-c-menu-toggle pf-m-plain"
              type="button"
              aria-expanded="false"
              aria-label="Menu toggle"
              id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-overflow-toggle"
            >
              <span class="pf-v6-c-menu-toggle__icon">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
              </span>
            </button>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-toolbar__item pf-m-pagination">
        <div
          class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
        >
          <div
            class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
          >
            <div class="pf-v6-c-pagination__page-menu">
              <button
                class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
                type="button"
                aria-expanded="false"
                aria-label="Menu toggle"
                id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-menu-toggle"
              >
                <span class="pf-v6-c-menu-toggle__text">
                  <b>1 - 10</b>&nbsp;of&nbsp;
                  <b>36</b>
                </span>
                <span class="pf-v6-c-menu-toggle__controls">
                  <span class="pf-v6-c-menu-toggle__toggle-icon">
                    <i class="fas fa-caret-down" aria-hidden="true"></i>
                  </span>
                </span>
              </button>
            </div>
            <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
              <div class="pf-v6-c-pagination__nav-control pf-m-prev">
                <button
                  class="pf-v6-c-button pf-m-plain"
                  type="button"
                  disabled
                  aria-label="Go to previous page"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
              <div class="pf-v6-c-pagination__nav-control pf-m-next">
                <button
                  class="pf-v6-c-button pf-m-plain"
                  type="button"
                  aria-label="Go to next page"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-angle-right" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>

    <div
      class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
      id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-expandable-content"
      hidden
    ></div>
  </div>
</div>

```

### Toolbar attribute value single select filter on mobile

```html
<div
  class="pf-v6-c-toolbar"
  id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example"
>
  <div class="pf-v6-c-toolbar__content">
    <div class="pf-v6-c-toolbar__content-section">
      <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
        <div class="pf-v6-c-toolbar__toggle">
          <button
            class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
            type="button"
            aria-expanded="true"
            aria-label="Show filters"
            aria-controls="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-expandable-content"
          >
            <span class="pf-v6-c-menu-toggle__icon">
              <i class="fas fa-filter" aria-hidden="true"></i>
            </span>
          </button>
        </div>
        <div class="pf-v6-c-toolbar__item">
          <div
            class="pf-v6-c-input-group"
            aria-label="search filter"
            role="group"
          >
            <div class="pf-v6-c-input-group__item">
              <button
                class="pf-v6-c-menu-toggle"
                type="button"
                aria-expanded="false"
                id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-search-filter-menu"
              >
                <span class="pf-v6-c-menu-toggle__text">Name</span>
                <span class="pf-v6-c-menu-toggle__controls">
                  <span class="pf-v6-c-menu-toggle__toggle-icon">
                    <i class="fas fa-caret-down" aria-hidden="true"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="pf-v6-c-input-group__item pf-m-fill">
              <div class="pf-v6-c-text-input-group">
                <div class="pf-v6-c-text-input-group__main pf-m-icon">
                  <span class="pf-v6-c-text-input-group__text">
                    <span class="pf-v6-c-text-input-group__icon">
                      <i class="fas fa-fw fa-search"></i>
                    </span>
                    <input
                      class="pf-v6-c-text-input-group__text-input"
                      type="text"
                      placeholder="Find by name"
                      value
                      aria-label="Search input"
                    />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group">
          <div class="pf-v6-c-toolbar__item">
            <button
              class="pf-v6-c-menu-toggle"
              type="button"
              aria-expanded="false"
              id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-menu-toggle-checkbox-status"
            >
              <span class="pf-v6-c-menu-toggle__text">Status</span>
              <span class="pf-v6-c-menu-toggle__controls">
                <span class="pf-v6-c-menu-toggle__toggle-icon">
                  <i class="fas fa-caret-down" aria-hidden="true"></i>
                </span>
              </span>
            </button>
          </div>
          <div class="pf-v6-c-toolbar__item">
            <button
              class="pf-v6-c-menu-toggle"
              type="button"
              aria-expanded="false"
              id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-menu-toggle-checkbox-risk"
            >
              <span class="pf-v6-c-menu-toggle__text">Risk</span>
              <span class="pf-v6-c-menu-toggle__controls">
                <span class="pf-v6-c-menu-toggle__toggle-icon">
                  <i class="fas fa-caret-down" aria-hidden="true"></i>
                </span>
              </span>
            </button>
          </div>
        </div>
      </div>

      <div class="pf-v6-c-toolbar__item">
        <div
          class="pf-v6-c-overflow-menu"
          id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example--overflow-menu"
        >
          <div class="pf-v6-c-overflow-menu__control">
            <button
              class="pf-v6-c-menu-toggle pf-m-plain"
              type="button"
              aria-expanded="false"
              aria-label="Menu toggle"
              id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-overflow-toggle"
            >
              <span class="pf-v6-c-menu-toggle__icon">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
              </span>
            </button>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-toolbar__item pf-m-pagination">
        <div
          class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
        >
          <div
            class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
          >
            <div class="pf-v6-c-pagination__page-menu">
              <button
                class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
                type="button"
                aria-expanded="false"
                aria-label="Menu toggle"
                id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-menu-toggle"
              >
                <span class="pf-v6-c-menu-toggle__text">
                  <b>1 - 10</b>&nbsp;of&nbsp;
                  <b>36</b>
                </span>
                <span class="pf-v6-c-menu-toggle__controls">
                  <span class="pf-v6-c-menu-toggle__toggle-icon">
                    <i class="fas fa-caret-down" aria-hidden="true"></i>
                  </span>
                </span>
              </button>
            </div>
            <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
              <div class="pf-v6-c-pagination__nav-control pf-m-prev">
                <button
                  class="pf-v6-c-button pf-m-plain"
                  type="button"
                  disabled
                  aria-label="Go to previous page"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
              <div class="pf-v6-c-pagination__nav-control pf-m-next">
                <button
                  class="pf-v6-c-button pf-m-plain"
                  type="button"
                  aria-label="Go to next page"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-angle-right" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>

    <div
      class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
      id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-expandable-content"
    >
      <div class="pf-v6-c-toolbar__group pf-m-filter-group">
        <div class="pf-v6-c-toolbar__item">
          <button
            class="pf-v6-c-menu-toggle"
            type="button"
            aria-expanded="false"
            id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-menu-toggle-checkbox-status-expandable"
          >
            <span class="pf-v6-c-menu-toggle__text">Status</span>
            <span class="pf-v6-c-menu-toggle__controls">
              <span class="pf-v6-c-menu-toggle__toggle-icon">
                <i class="fas fa-caret-down" aria-hidden="true"></i>
              </span>
            </span>
          </button>
        </div>
        <div class="pf-v6-c-toolbar__item">
          <button
            class="pf-v6-c-menu-toggle"
            type="button"
            aria-expanded="false"
            id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-menu-toggle-checkbox-risk-expandable"
          >
            <span class="pf-v6-c-menu-toggle__text">Risk</span>
            <span class="pf-v6-c-menu-toggle__controls">
              <span class="pf-v6-c-menu-toggle__toggle-icon">
                <i class="fas fa-caret-down" aria-hidden="true"></i>
              </span>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

```

### Toolbar attribute value checkbox menu toggle filter on desktop

```html
<div
  class="pf-v6-c-toolbar"
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example"
>
  <div class="pf-v6-c-toolbar__content">
    <div class="pf-v6-c-toolbar__content-section">
      <div class="pf-v6-c-toolbar__group pf-m-filter-group">
        <div class="pf-v6-c-toolbar__item">
          <button
            class="pf-v6-c-menu-toggle"
            type="button"
            aria-expanded="false"
            id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-menu-toggle-checkbox-status"
          >
            <span class="pf-v6-c-menu-toggle__text">Status</span>
            <span class="pf-v6-c-menu-toggle__controls">
              <span class="pf-v6-c-menu-toggle__toggle-icon">
                <i class="fas fa-caret-down" aria-hidden="true"></i>
              </span>
            </span>
          </button>
        </div>
        <div class="pf-v6-c-toolbar__item">
          <button
            class="pf-v6-c-menu-toggle"
            type="button"
            aria-expanded="false"
            id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-menu-toggle-checkbox-risk"
          >
            <span class="pf-v6-c-menu-toggle__text">Risk</span>
            <span class="pf-v6-c-menu-toggle__controls">
              <span class="pf-v6-c-menu-toggle__toggle-icon">
                <i class="fas fa-caret-down" aria-hidden="true"></i>
              </span>
            </span>
          </button>
        </div>
      </div>

      <div class="pf-v6-c-toolbar__item">
        <div
          class="pf-v6-c-overflow-menu"
          id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example--overflow-menu"
        >
          <div class="pf-v6-c-overflow-menu__content">
            <div class="pf-v6-c-overflow-menu__group pf-m-button-group">
              <div class="pf-v6-c-overflow-menu__item">
                <button class="pf-v6-c-button pf-m-primary" type="button">
                  <span class="pf-v6-c-button__text">Primary</span>
                </button>
              </div>
              <div class="pf-v6-c-overflow-menu__item">
                <button class="pf-v6-c-button pf-m-secondary" type="button">
                  <span class="pf-v6-c-button__text">Secondary</span>
                </button>
              </div>
            </div>
          </div>
          <div class="pf-v6-c-overflow-menu__control">
            <button
              class="pf-v6-c-menu-toggle pf-m-plain"
              type="button"
              aria-expanded="false"
              aria-label="Menu toggle"
              id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-overflow-toggle"
            >
              <span class="pf-v6-c-menu-toggle__icon">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
              </span>
            </button>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-toolbar__item pf-m-pagination">
        <div
          class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
        >
          <div
            class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
          >
            <div class="pf-v6-c-pagination__page-menu">
              <button
                class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
                type="button"
                aria-expanded="false"
                aria-label="Menu toggle"
                id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-menu-toggle"
              >
                <span class="pf-v6-c-menu-toggle__text">
                  <b>1 - 10</b>&nbsp;of&nbsp;
                  <b>36</b>
                </span>
                <span class="pf-v6-c-menu-toggle__controls">
                  <span class="pf-v6-c-menu-toggle__toggle-icon">
                    <i class="fas fa-caret-down" aria-hidden="true"></i>
                  </span>
                </span>
              </button>
            </div>
            <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
              <div class="pf-v6-c-pagination__nav-control pf-m-prev">
                <button
                  class="pf-v6-c-button pf-m-plain"
                  type="button"
                  disabled
                  aria-label="Go to previous page"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
              <div class="pf-v6-c-pagination__nav-control pf-m-next">
                <button
                  class="pf-v6-c-button pf-m-plain"
                  type="button"
                  aria-label="Go to next page"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-angle-right" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>

    <div
      class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
      id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-expandable-content"
      hidden
    ></div>
  </div>
  <div class="pf-v6-c-toolbar__content">
    <div class="pf-v6-c-toolbar__group pf-m-label-group">
      <div class="pf-v6-c-toolbar__group pf-m-grow pf-m-label-group">
        <div class="pf-v6-c-toolbar__item">
          <div class="pf-v6-c-label-group pf-m-category">
            <div class="pf-v6-c-label-group__main">
              <span
                class="pf-v6-c-label-group__label"
                aria-hidden="true"
                id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-status-label-group-label"
              >Status</span>
              <ul
                class="pf-v6-c-label-group__list"
                role="list"
                aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-status-label-group-label"
              >
                <li class="pf-v6-c-label-group__list-item">
                  <span class="pf-v6-c-label pf-m-outline">
                    <span class="pf-v6-c-label__content">
                      <span class="pf-v6-c-label__content">
                        <span
                          class="pf-v6-c-label__text"
                          id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statuslabel-one"
                        >Label one</span>
                      </span>
                      <span class="pf-v6-c-label__actions">
                        <button
                          class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                          type="button"
                          aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statusremove-label-one toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statuslabel-one"
                          aria-label="Remove"
                          id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statusremove-label-one"
                        >
                          <span class="pf-v6-c-button__icon">
                            <i class="fas fa-times" aria-hidden="true"></i>
                          </span>
                        </button>
                      </span>
                    </span>
                  </span>
                </li>
                <li class="pf-v6-c-label-group__list-item">
                  <span class="pf-v6-c-label pf-m-outline">
                    <span class="pf-v6-c-label__content">
                      <span class="pf-v6-c-label__content">
                        <span
                          class="pf-v6-c-label__text"
                          id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statuslabel-two"
                        >Label two</span>
                      </span>
                      <span class="pf-v6-c-label__actions">
                        <button
                          class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                          type="button"
                          aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statusremove-label-two toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statuslabel-two"
                          aria-label="Remove"
                          id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statusremove-label-two"
                        >
                          <span class="pf-v6-c-button__icon">
                            <i class="fas fa-times" aria-hidden="true"></i>
                          </span>
                        </button>
                      </span>
                    </span>
                  </span>
                </li>
                <li class="pf-v6-c-label-group__list-item">
                  <span class="pf-v6-c-label pf-m-outline">
                    <span class="pf-v6-c-label__content">
                      <span class="pf-v6-c-label__content">
                        <span
                          class="pf-v6-c-label__text"
                          id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statuslabel-three"
                        >Label three</span>
                      </span>
                      <span class="pf-v6-c-label__actions">
                        <button
                          class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                          type="button"
                          aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statusremove-label-three toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statuslabel-three"
                          aria-label="Remove"
                          id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statusremove-label-three"
                        >
                          <span class="pf-v6-c-button__icon">
                            <i class="fas fa-times" aria-hidden="true"></i>
                          </span>
                        </button>
                      </span>
                    </span>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="pf-v6-c-toolbar__item">
          <div class="pf-v6-c-label-group pf-m-category">
            <div class="pf-v6-c-label-group__main">
              <span
                class="pf-v6-c-label-group__label"
                aria-hidden="true"
                id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-risk-label-group-label"
              >Risk</span>
              <ul
                class="pf-v6-c-label-group__list"
                role="list"
                aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-risk-label-group-label"
              >
                <li class="pf-v6-c-label-group__list-item">
                  <span class="pf-v6-c-label pf-m-outline">
                    <span class="pf-v6-c-label__content">
                      <span class="pf-v6-c-label__content">
                        <span
                          class="pf-v6-c-label__text"
                          id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-risklabel-one"
                        >Label one</span>
                      </span>
                      <span class="pf-v6-c-label__actions">
                        <button
                          class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                          type="button"
                          aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-riskremove-label-one toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-risklabel-one"
                          aria-label="Remove"
                          id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-riskremove-label-one"
                        >
                          <span class="pf-v6-c-button__icon">
                            <i class="fas fa-times" aria-hidden="true"></i>
                          </span>
                        </button>
                      </span>
                    </span>
                  </span>
                </li>
                <li class="pf-v6-c-label-group__list-item">
                  <span class="pf-v6-c-label pf-m-outline">
                    <span class="pf-v6-c-label__content">
                      <span class="pf-v6-c-label__content">
                        <span
                          class="pf-v6-c-label__text"
                          id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-risklabel-two"
                        >Label two</span>
                      </span>
                      <span class="pf-v6-c-label__actions">
                        <button
                          class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                          type="button"
                          aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-riskremove-label-two toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-risklabel-two"
                          aria-label="Remove"
                          id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-riskremove-label-two"
                        >
                          <span class="pf-v6-c-button__icon">
                            <i class="fas fa-times" aria-hidden="true"></i>
                          </span>
                        </button>
                      </span>
                    </span>
                  </span>
                </li>
                <li class="pf-v6-c-label-group__list-item">
                  <span class="pf-v6-c-label pf-m-outline">
                    <span class="pf-v6-c-label__content">
                      <span class="pf-v6-c-label__content">
                        <span
                          class="pf-v6-c-label__text"
                          id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-risklabel-three"
                        >Label three</span>
                      </span>
                      <span class="pf-v6-c-label__actions">
                        <button
                          class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                          type="button"
                          aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-riskremove-label-three toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-risklabel-three"
                          aria-label="Remove"
                          id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-riskremove-label-three"
                        >
                          <span class="pf-v6-c-button__icon">
                            <i class="fas fa-times" aria-hidden="true"></i>
                          </span>
                        </button>
                      </span>
                    </span>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="pf-v6-c-toolbar__group pf-m-action-group-inline">
      <div class="pf-v6-c-toolbar__item">6 filters applied</div>
      <div class="pf-v6-c-toolbar__item">
        <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
          <span class="pf-v6-c-button__text">Clear all filters</span>
        </button>
      </div>
      <div class="pf-v6-c-toolbar__item">
        <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
          <span class="pf-v6-c-button__text">Save all filters</span>
        </button>
      </div>
    </div>
  </div>
</div>

```

### Toolbar attribute value checkbox menu toggle filter on mobile

```html
<div
  class="pf-v6-c-toolbar"
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example"
>
  <div class="pf-v6-c-toolbar__content">
    <div class="pf-v6-c-toolbar__content-section">
      <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
        <div class="pf-v6-c-toolbar__toggle">
          <button
            class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
            type="button"
            aria-expanded="true"
            aria-label="Show filters"
            aria-controls="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-expandable-content"
          >
            <span class="pf-v6-c-menu-toggle__icon">
              <i class="fas fa-filter" aria-hidden="true"></i>
            </span>
          </button>
        </div>
        <div class="pf-v6-c-toolbar__item">
          <div
            class="pf-v6-c-input-group"
            aria-label="search filter"
            role="group"
          >
            <div class="pf-v6-c-input-group__item">
              <button
                class="pf-v6-c-menu-toggle"
                type="button"
                aria-expanded="false"
                id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-search-filter-menu"
              >
                <span class="pf-v6-c-menu-toggle__text">Name</span>
                <span class="pf-v6-c-menu-toggle__controls">
                  <span class="pf-v6-c-menu-toggle__toggle-icon">
                    <i class="fas fa-caret-down" aria-hidden="true"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="pf-v6-c-input-group__item pf-m-fill">
              <div class="pf-v6-c-text-input-group">
                <div class="pf-v6-c-text-input-group__main pf-m-icon">
                  <span class="pf-v6-c-text-input-group__text">
                    <span class="pf-v6-c-text-input-group__icon">
                      <i class="fas fa-fw fa-search"></i>
                    </span>
                    <input
                      class="pf-v6-c-text-input-group__text-input"
                      type="text"
                      placeholder="Find by name"
                      value
                      aria-label="Search input"
                    />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group">
          <div class="pf-v6-c-toolbar__item">
            <button
              class="pf-v6-c-menu-toggle"
              type="button"
              aria-expanded="false"
              id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-menu-toggle-checkbox-status"
            >
              <span class="pf-v6-c-menu-toggle__text">Status</span>
              <span class="pf-v6-c-menu-toggle__controls">
                <span class="pf-v6-c-menu-toggle__toggle-icon">
                  <i class="fas fa-caret-down" aria-hidden="true"></i>
                </span>
              </span>
            </button>
          </div>
          <div class="pf-v6-c-toolbar__item">
            <button
              class="pf-v6-c-menu-toggle"
              type="button"
              aria-expanded="false"
              id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-menu-toggle-checkbox-risk"
            >
              <span class="pf-v6-c-menu-toggle__text">Risk</span>
              <span class="pf-v6-c-menu-toggle__controls">
                <span class="pf-v6-c-menu-toggle__toggle-icon">
                  <i class="fas fa-caret-down" aria-hidden="true"></i>
                </span>
              </span>
            </button>
          </div>
        </div>
      </div>

      <div class="pf-v6-c-toolbar__item">
        <div
          class="pf-v6-c-overflow-menu"
          id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example--overflow-menu"
        >
          <div class="pf-v6-c-overflow-menu__control">
            <button
              class="pf-v6-c-menu-toggle pf-m-plain"
              type="button"
              aria-expanded="false"
              aria-label="Menu toggle"
              id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-overflow-toggle"
            >
              <span class="pf-v6-c-menu-toggle__icon">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
              </span>
            </button>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-toolbar__item pf-m-pagination">
        <div
          class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
        >
          <div
            class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
          >
            <div class="pf-v6-c-pagination__page-menu">
              <button
                class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
                type="button"
                aria-expanded="false"
                aria-label="Menu toggle"
                id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-menu-toggle"
              >
                <span class="pf-v6-c-menu-toggle__text">
                  <b>1 - 10</b>&nbsp;of&nbsp;
                  <b>36</b>
                </span>
                <span class="pf-v6-c-menu-toggle__controls">
                  <span class="pf-v6-c-menu-toggle__toggle-icon">
                    <i class="fas fa-caret-down" aria-hidden="true"></i>
                  </span>
                </span>
              </button>
            </div>
            <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
              <div class="pf-v6-c-pagination__nav-control pf-m-prev">
                <button
                  class="pf-v6-c-button pf-m-plain"
                  type="button"
                  disabled
                  aria-label="Go to previous page"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
              <div class="pf-v6-c-pagination__nav-control pf-m-next">
                <button
                  class="pf-v6-c-button pf-m-plain"
                  type="button"
                  aria-label="Go to next page"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-angle-right" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>

    <div
      class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
      id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-expandable-content"
    >
      <div class="pf-v6-c-toolbar__group pf-m-filter-group">
        <div class="pf-v6-c-toolbar__item">
          <button
            class="pf-v6-c-menu-toggle"
            type="button"
            aria-expanded="false"
            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-menu-toggle-checkbox-status-expandable"
          >
            <span class="pf-v6-c-menu-toggle__text">Status</span>
            <span class="pf-v6-c-menu-toggle__controls">
              <span class="pf-v6-c-menu-toggle__toggle-icon">
                <i class="fas fa-caret-down" aria-hidden="true"></i>
              </span>
            </span>
          </button>
        </div>
        <div class="pf-v6-c-toolbar__item">
          <button
            class="pf-v6-c-menu-toggle"
            type="button"
            aria-expanded="false"
            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-menu-toggle-checkbox-risk-expandable"
          >
            <span class="pf-v6-c-menu-toggle__text">Risk</span>
            <span class="pf-v6-c-menu-toggle__controls">
              <span class="pf-v6-c-menu-toggle__toggle-icon">
                <i class="fas fa-caret-down" aria-hidden="true"></i>
              </span>
            </span>
          </button>
        </div>
      </div>

      <div class="pf-v6-c-toolbar__group pf-m-label-group">
        <div class="pf-v6-c-toolbar__group pf-m-grow pf-m-label-group">
          <div class="pf-v6-c-toolbar__item">
            <div class="pf-v6-c-label-group pf-m-category">
              <div class="pf-v6-c-label-group__main">
                <span
                  class="pf-v6-c-label-group__label"
                  aria-hidden="true"
                  id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-status-label-group-label"
                >Status</span>
                <ul
                  class="pf-v6-c-label-group__list"
                  role="list"
                  aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-status-label-group-label"
                >
                  <li class="pf-v6-c-label-group__list-item">
                    <span class="pf-v6-c-label pf-m-outline">
                      <span class="pf-v6-c-label__content">
                        <span class="pf-v6-c-label__content">
                          <span
                            class="pf-v6-c-label__text"
                            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statuslabel-one"
                          >Label one</span>
                        </span>
                        <span class="pf-v6-c-label__actions">
                          <button
                            class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                            type="button"
                            aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statusremove-label-one toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statuslabel-one"
                            aria-label="Remove"
                            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statusremove-label-one"
                          >
                            <span class="pf-v6-c-button__icon">
                              <i class="fas fa-times" aria-hidden="true"></i>
                            </span>
                          </button>
                        </span>
                      </span>
                    </span>
                  </li>
                  <li class="pf-v6-c-label-group__list-item">
                    <span class="pf-v6-c-label pf-m-outline">
                      <span class="pf-v6-c-label__content">
                        <span class="pf-v6-c-label__content">
                          <span
                            class="pf-v6-c-label__text"
                            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statuslabel-two"
                          >Label two</span>
                        </span>
                        <span class="pf-v6-c-label__actions">
                          <button
                            class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                            type="button"
                            aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statusremove-label-two toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statuslabel-two"
                            aria-label="Remove"
                            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statusremove-label-two"
                          >
                            <span class="pf-v6-c-button__icon">
                              <i class="fas fa-times" aria-hidden="true"></i>
                            </span>
                          </button>
                        </span>
                      </span>
                    </span>
                  </li>
                  <li class="pf-v6-c-label-group__list-item">
                    <span class="pf-v6-c-label pf-m-outline">
                      <span class="pf-v6-c-label__content">
                        <span class="pf-v6-c-label__content">
                          <span
                            class="pf-v6-c-label__text"
                            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statuslabel-three"
                          >Label three</span>
                        </span>
                        <span class="pf-v6-c-label__actions">
                          <button
                            class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                            type="button"
                            aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statusremove-label-three toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statuslabel-three"
                            aria-label="Remove"
                            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statusremove-label-three"
                          >
                            <span class="pf-v6-c-button__icon">
                              <i class="fas fa-times" aria-hidden="true"></i>
                            </span>
                          </button>
                        </span>
                      </span>
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="pf-v6-c-toolbar__item">
            <div class="pf-v6-c-label-group pf-m-category">
              <div class="pf-v6-c-label-group__main">
                <span
                  class="pf-v6-c-label-group__label"
                  aria-hidden="true"
                  id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-risk-label-group-label"
                >Risk</span>
                <ul
                  class="pf-v6-c-label-group__list"
                  role="list"
                  aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-risk-label-group-label"
                >
                  <li class="pf-v6-c-label-group__list-item">
                    <span class="pf-v6-c-label pf-m-outline">
                      <span class="pf-v6-c-label__content">
                        <span class="pf-v6-c-label__content">
                          <span
                            class="pf-v6-c-label__text"
                            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-risklabel-one"
                          >Label one</span>
                        </span>
                        <span class="pf-v6-c-label__actions">
                          <button
                            class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                            type="button"
                            aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-riskremove-label-one toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-risklabel-one"
                            aria-label="Remove"
                            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-riskremove-label-one"
                          >
                            <span class="pf-v6-c-button__icon">
                              <i class="fas fa-times" aria-hidden="true"></i>
                            </span>
                          </button>
                        </span>
                      </span>
                    </span>
                  </li>
                  <li class="pf-v6-c-label-group__list-item">
                    <span class="pf-v6-c-label pf-m-outline">
                      <span class="pf-v6-c-label__content">
                        <span class="pf-v6-c-label__content">
                          <span
                            class="pf-v6-c-label__text"
                            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-risklabel-two"
                          >Label two</span>
                        </span>
                        <span class="pf-v6-c-label__actions">
                          <button
                            class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                            type="button"
                            aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-riskremove-label-two toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-risklabel-two"
                            aria-label="Remove"
                            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-riskremove-label-two"
                          >
                            <span class="pf-v6-c-button__icon">
                              <i class="fas fa-times" aria-hidden="true"></i>
                            </span>
                          </button>
                        </span>
                      </span>
                    </span>
                  </li>
                  <li class="pf-v6-c-label-group__list-item">
                    <span class="pf-v6-c-label pf-m-outline">
                      <span class="pf-v6-c-label__content">
                        <span class="pf-v6-c-label__content">
                          <span
                            class="pf-v6-c-label__text"
                            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-risklabel-three"
                          >Label three</span>
                        </span>
                        <span class="pf-v6-c-label__actions">
                          <button
                            class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                            type="button"
                            aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-riskremove-label-three toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-risklabel-three"
                            aria-label="Remove"
                            id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-riskremove-label-three"
                          >
                            <span class="pf-v6-c-button__icon">
                              <i class="fas fa-times" aria-hidden="true"></i>
                            </span>
                          </button>
                        </span>
                      </span>
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="pf-v6-c-toolbar__group pf-m-action-group-inline">
        <div class="pf-v6-c-toolbar__item">6 filters applied</div>
        <div class="pf-v6-c-toolbar__item">
          <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
            <span class="pf-v6-c-button__text">Clear all filters</span>
          </button>
        </div>
        <div class="pf-v6-c-toolbar__item">
          <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
            <span class="pf-v6-c-button__text">Save all filters</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

```

### Toolbar pagination management on mobile

```hbs isFullscreen
{{> page-template page-template--id="toolbar-pagination-management-example"}}

{{#* inline "page-template-section"}}
  {{#> page-main-section page-main-section--ExcludeMainBody=true}}
    {{#> page-main-body}}
      {{#> toolbar toolbar--id=(concat page-template--id "-toolbar")}}
        {{#> toolbar-content}}
          {{#> toolbar-content-section}}
            {{> toolbar-toggle-group toolbar-toggle-group--HasNoFilter=true toolbar-toggle-group--ShowOn='lg'}}
            {{> toolbar-group-action-overflow-menu}}
            {{> toolbar-pagination}}
          {{/toolbar-content-section}}
          {{> toolbar-expandable-content}}
        {{/toolbar-content}}
      {{/toolbar}}
    {{/page-main-body}}
    {{#> page-main-body}}
      {{> table-simple-table page--id="toolbar-and-table-static-search-overflow-menu-collapsed"}}
      {{#> pagination pagination--modifier="pf-m-bottom"}}
        {{> pagination-menu-toggle pagination-menu-toggle--id="pagination-menu-toggle-bottom-collapsed-example" pagination-menu-toggle--modifier="pf-m-top"}}
        {{> pagination-nav-content}}
      {{/pagination}}
    {{/page-main-body}}
  {{/page-main-section}}
{{/inline}}
```
