@patternfly/patternfly

--- id: Toolbar section: components ---import './Toolbar.css' ## Demos ### Toolbar attribute value search filter on desktop ```html <div class="pf-v5-c-toolbar" id="toolbar-attribute-value-search-filter-desktop-example" > <div class="pf-v5-c-toolbar__content"> <div class="pf-v5-c-toolbar__content-section"> <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show"> <div class="pf-v5-c-toolbar__toggle"> <button class="pf-v5-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" > <i class="fas fa-filter" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-toolbar__item pf-m-search-filter"> <div class="pf-v5-c-input-group" aria-label="search filter" role="group" > <div class="pf-v5-c-input-group__item"> <button class="pf-v5-c-menu-toggle" type="button" aria-expanded="false" id="toolbar-attribute-value-search-filter-desktop-example-search-filter-menu" > <span class="pf-v5-c-menu-toggle__icon"> <i class="fas fa-filter" aria-hidden="true"></i> </span> <span class="pf-v5-c-menu-toggle__text">Name</span> <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> </div> <div class="pf-v5-c-input-group__item pf-m-fill"> <div class="pf-v5-c-text-input-group"> <div class="pf-v5-c-text-input-group__main pf-m-icon"> <span class="pf-v5-c-text-input-group__text"> <span class="pf-v5-c-text-input-group__icon"> <i class="fas fa-fw fa-search"></i> </span> <input class="pf-v5-c-text-input-group__text-input" type="text" placeholder="Filter by name" value aria-label="Search input" /> </span> </div> </div> </div> </div> </div> </div> <div class="pf-v5-c-toolbar__item pf-m-overflow-menu"> <div class="pf-v5-c-overflow-menu" id="toolbar-attribute-value-search-filter-desktop-example-overflow-menu" > <div class="pf-v5-c-overflow-menu__content"> <div class="pf-v5-c-overflow-menu__group pf-m-button-group"> <div class="pf-v5-c-overflow-menu__item"> <button class="pf-v5-c-button pf-m-primary" type="button" >Primary</button> </div> <div class="pf-v5-c-overflow-menu__item"> <button class="pf-v5-c-button pf-m-secondary" type="button" >Secondary</button> </div> </div> </div> <div class="pf-v5-c-overflow-menu__control"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain" type="button" id="toolbar-attribute-value-search-filter-desktop-example-overflow-menu-dropdown-toggle" aria-label="Overflow menu" aria-expanded="false" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu" role="menu" aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-overflow-menu-dropdown-toggle" hidden > <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Tertiary</button> </li> </ul> </div> </div> </div> </div> <div class="pf-v5-c-toolbar__item pf-m-pagination"> <div class="pf-v5-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md" > <div class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md" > <button class="pf-v5-c-menu-toggle pf-m-plain pf-m-text" type="button" aria-expanded="false" id="toolbar-attribute-value-search-filter-desktop-example-pagination-menu-toggle" > <span class="pf-v5-c-menu-toggle__text"> <b>1 - 10</b> of  <b>36</b> </span> <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> <nav class="pf-v5-c-pagination__nav" aria-label="Pagination"> <div class="pf-v5-c-pagination__nav-control pf-m-prev"> <button class="pf-v5-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-v5-c-pagination__nav-control pf-m-next"> <button class="pf-v5-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-v5-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 ```html isFullscreen <div class="pf-v5-c-page" id="toolbar-pagination-management-example"> <div class="pf-v5-c-skip-to-content"> <a class="pf-v5-c-button pf-m-primary" href="#main-content-toolbar-pagination-management-example" >Skip to content</a> </div> <header class="pf-v5-c-masthead" id="toolbar-pagination-management-example-masthead" > <span class="pf-v5-c-masthead__toggle"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Global navigation" > <i class="fas fa-bars" aria-hidden="true"></i> </button> </span> <div class="pf-v5-c-masthead__main"> <a class="pf-v5-c-masthead__brand" href="#"> <img class="pf-v5-c-brand" src="/assets/images/pf-logo.svg" alt="PatternFly logo" style="--pf-v5-c-brand--Height:36px" /> </a> </div> <div class="pf-v5-c-masthead__content"> <div class="pf-v5-c-toolbar pf-m-full-height pf-m-static" id="toolbar-pagination-management-example-masthead-toolbar" > <div class="pf-v5-c-toolbar__content"> <div class="pf-v5-c-toolbar__content-section"> <div class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md" > <div class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg" > <div class="pf-v5-c-toolbar__item"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Application launcher" > <i class="fas fa-th" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-toolbar__item"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Settings" > <i class="fas fa-cog" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-toolbar__item"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Help" > <i class="fas fa-question-circle" aria-hidden="true"></i> </button> </div> </div> <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> </div> </div> <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm"> <button class="pf-v5-c-menu-toggle pf-m-full-height" type="button" aria-expanded="false" > <span class="pf-v5-c-menu-toggle__icon"> <img class="pf-v5-c-avatar" alt="Avatar image" src="/assets/images/img_avatar-light.svg" /> </span> <span class="pf-v5-c-menu-toggle__text">Ned Username</span> <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> </div> </div> </div> </div> </div> </header> <div class="pf-v5-c-page__sidebar"> <div class="pf-v5-c-page__sidebar-body"> <nav class="pf-v5-c-nav" id="toolbar-pagination-management-example-primary-nav" aria-label="Global" > <ul class="pf-v5-c-nav__list" role="list"> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link">System panel</a> </li> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link pf-m-current" aria-current="page" >Policy</a> </li> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link">Authentication</a> </li> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link">Network services</a> </li> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link">Server</a> </li> </ul> </nav> </div> </div> <main class="pf-v5-c-page__main" tabindex="-1" id="main-content-toolbar-pagination-management-example" > <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width"> <div class="pf-v5-c-page__main-body"> <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb"> <ol class="pf-v5-c-breadcrumb__list" role="list"> <li class="pf-v5-c-breadcrumb__item"> <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a> </li> <li class="pf-v5-c-breadcrumb__item"> <span class="pf-v5-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a> </li> <li class="pf-v5-c-breadcrumb__item"> <span class="pf-v5-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a> </li> <li class="pf-v5-c-breadcrumb__item"> <span class="pf-v5-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-v5-c-breadcrumb__link pf-m-current" aria-current="page" >Section landing</a> </li> </ol> </nav> </div> </section> <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light"> <div class="pf-v5-c-page__main-body"> <div class="pf-v5-c-content"> <h1>Main title</h1> <p>This is a full page demo.</p> </div> </div> </section> <section class="pf-v5-c-page__main-section"> <div class="pf-v5-c-toolbar" id="toolbar-with-validation-example"> <div class="pf-v5-c-toolbar__content"> <div class="pf-v5-c-toolbar__content-section"> <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl" > <div class="pf-v5-c-toolbar__toggle"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Show filters" aria-controls="toolbar-with-validation-example-expandable-content" > <i class="fas fa-filter" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-toolbar__group pf-m-filter-group"> <div class="pf-v5-c-toolbar__item"> <div class="pf-v5-c-input-group" aria-label="search filter" role="group" > <div class="pf-v5-c-input-group__item"> <button class="pf-v5-c-menu-toggle" type="button" aria-expanded="false" id="toolbar-with-validation-example-month" > <span class="pf-v5-c-menu-toggle__icon"> <i class="fas fa-filter" aria-hidden="true"></i> </span> <span class="pf-v5-c-menu-toggle__text">Last month</span> <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> </div> <div class="pf-v5-c-input-group__item"> <div class="pf-v5-c-date-picker"> <div class="pf-v5-c-date-picker__input"> <div class="pf-v5-c-input-group" aria-label="search filter" role="group" > <span class="pf-v5-c-form-control"> <input type="text" value="2020-03-05" id="toolbar-with-validation-example-helper-text-input" name="toolbar-with-validation-example-helper-text-input" aria-label="Date picker" /> </span> <button class="pf-v5-c-button pf-m-control" type="button" aria-label="Toggle date picker" > <i class="fas fa-calendar-alt" aria-hidden="true"></i> </button> </div> </div> <div class="pf-v5-c-date-picker__helper-text"> <div class="pf-v5-c-helper-text"> <div class="pf-v5-c-helper-text__item"> <span class="pf-v5-c-helper-text__item-text" >MM/DD/YYYY</span> </div> </div> </div> </div> </div> <div class="pf-v5-c-input-group__item"> <div class="pf-v5-c-date-picker"> <div class="pf-v5-c-date-picker__input"> <div class="pf-v5-c-input-group" aria-label="search filter" role="group" > <span class="pf-v5-c-form-control pf-m-error"> <input aria-invalid="true" type="text" value="2020-03-05" id="toolbar-with-validation-example-invalid-input" name="toolbar-with-validation-example-invalid-input" aria-label="Date picker" /> <span class="pf-v5-c-form-control__utilities"> <span class="pf-v5-c-form-control__icon pf-m-status" > <i class="fas fa-exclamation-circle" aria-hidden="true" ></i> </span> </span> </span> <button class="pf-v5-c-button pf-m-control" type="button" aria-label="Toggle date picker" > <i class="fas fa-calendar-alt" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-date-picker__helper-text"></div> </div> <div class="pf-v5-c-date-picker__helper-text"> <div class="pf-v5-c-helper-text"> <div class="pf-v5-c-helper-text__item"> <span class="pf-v5-c-helper-text__item-text" >Max: 08/10/2022</span> </div> </div> </div> </div> </div> </div> </div> </div> <div class="pf-v5-c-toolbar__item pf-m-search-filter"> <div class="pf-v5-c-input-group" aria-label="search filter" role="group" > <div class="pf-v5-c-input-group__item"> <button class="pf-v5-c-menu-toggle" type="button" aria-expanded="false" id="toolbar-with-validation-example-search-filter-menu" > <span class="pf-v5-c-menu-toggle__icon"> <i class="fas fa-filter" aria-hidden="true"></i> </span> <span class="pf-v5-c-menu-toggle__text">Description</span> <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> </div> <div class="pf-v5-c-input-group__item pf-m-fill"> <div class="pf-v5-c-text-input-group"> <div class="pf-v5-c-text-input-group__main pf-m-icon"> <span class="pf-v5-c-text-input-group__text"> <span class="pf-v5-c-text-input-group__icon"> <i class="fas fa-fw fa-search"></i> </span> <input class="pf-v5-c-text-input-group__text-input" type="text" placeholder="Description" value aria-label="Search input" /> </span> </div> </div> </div> </div> </div> </div> <button class="pf-v5-c-button pf-m-primary" type="button">Download</button> </div> <div class="pf-v5-c-toolbar__expandable-content pf-m-hidden" id="toolbar-with-validation-example-expandable-content" hidden ></div> </div> </div> <div> <table class="pf-v5-c-table pf-m-grid-md" role="grid" aria-label="This is a table with checkboxes" id="-table-table" > <thead class="pf-v5-c-table__thead"> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td"></td> <th class="pf-v5-c-table__th" role="columnheader" scope="col" >Repositories</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col" >Branches</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col" >Pull requests</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col" >Workspaces</th> <th class="pf-v5-c-table__th" role="columnheader" scope="col" >Last commit</th> <td class="pf-v5-c-table__td"></td> <td class="pf-v5-c-table__td"></td> </tr> </thead> <tbody class="pf-v5-c-table__tbody" role="rowgroup"> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" name="checkrow1" aria-labelledby="-table-table-node1" /> </div> </td> <th class="pf-v5-c-table__th" role="columnheader" data-label="Repository name" > <div> <div id="-table-table-node1">Node 1</div> <a href="#">siemur/test-space</a> </div> </th> <td class="pf-v5-c-table__td" role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 10 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests" > <span> <i class="fas fa-code"></i> 25 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 5 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v5-c-table__td" role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="-table-table-dropdown-kebab-1-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="-table-table-dropdown-kebab-1-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" name="checkrow2" aria-labelledby="-table-table-node2" /> </div> </td> <th class="pf-v5-c-table__th" role="columnheader" data-label="Repository name" > <div> <div id="-table-table-node2">Node 2</div> <a href="#">siemur/test-space</a> </div> </th> <td class="pf-v5-c-table__td" role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 8 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests" > <span> <i class="fas fa-code"></i> 30 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 2 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v5-c-table__td" role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="-table-table-dropdown-kebab-2-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="-table-table-dropdown-kebab-2-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" name="checkrow3" aria-labelledby="-table-table-node3" /> </div> </td> <th class="pf-v5-c-table__th" role="columnheader" data-label="Repository name" > <div> <div id="-table-table-node3">Node 3</div> <a href="#">siemur/test-space</a> </div> </th> <td class="pf-v5-c-table__td" role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 12 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests" > <span> <i class="fas fa-code"></i> 48 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 13 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >30 days ago</td> <td class="pf-v5-c-table__td" role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="-table-table-dropdown-kebab-3-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="-table-table-dropdown-kebab-3-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" name="checkrow4" aria-labelledby="-table-table-node4" /> </div> </td> <th class="pf-v5-c-table__th" role="columnheader" data-label="Repository name" > <div> <div id="-table-table-node4">Node 4</div> <a href="#">siemur/test-space</a> </div> </th> <td class="pf-v5-c-table__td" role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 3 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests" > <span> <i class="fas fa-code"></i> 8 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 20 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >8 days ago</td> <td class="pf-v5-c-table__td" role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="-table-table-dropdown-kebab-4-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="-table-table-dropdown-kebab-4-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> </td> </tr> <tr class="pf-v5-c-table__tr" role="row"> <td class="pf-v5-c-table__td pf-v5-c-table__check" role="cell"> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" name="checkrow5" aria-labelledby="-table-table-node5" /> </div> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Repository name" > <div> <div id="-table-table-node5">Node 5</div> <a href="#">siemur/test-space</a> </div> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Branches"> <span> <i class="fas fa-code-branch"></i> 34 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Pull requests" > <span> <i class="fas fa-code"></i> 21 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Workspaces"> <span> <i class="fas fa-cube"></i> 26 </span> </td> <td class="pf-v5-c-table__td" role="cell" data-label="Last commit" >2 days ago</td> <td class="pf-v5-c-table__td" role="cell" data-label="Action"> <a href="#">Action link</a> </td> <td class="pf-v5-c-table__td pf-v5-c-table__action" role="cell"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="-table-table-dropdown-kebab-5-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="-table-table-dropdown-kebab-5-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> </td> </tr> </tbody> </table> </div> </section> </main> </div> ``` ### Toolbar attribute value search filter on mobile ```html <div class="pf-v5-c-toolbar" id="toolbar-attribute-value-search-filter-mobile-example" > <div class="pf-v5-c-toolbar__content"> <div class="pf-v5-c-toolbar__content-section"> <div class="pf-v5-c-toolbar__group pf-m-toggle-group"> <div class="pf-v5-c-toolbar__toggle"> <button class="pf-v5-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" > <i class="fas fa-filter" aria-hidden="true"></i> </button> </div> </div> <div class="pf-v5-c-toolbar__item pf-m-overflow-menu"> <div class="pf-v5-c-overflow-menu" id="toolbar-attribute-value-search-filter-mobile-example-overflow-menu" > <div class="pf-v5-c-overflow-menu__control"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain" type="button" id="toolbar-attribute-value-search-filter-mobile-example-overflow-menu-dropdown-toggle" aria-label="Overflow menu" aria-expanded="false" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu" role="menu" aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-overflow-menu-dropdown-toggle" hidden > <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Primary</button> </li> <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Secondary</button> </li> <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Tertiary</button> </li> </ul> </div> </div> </div> </div> <div class="pf-v5-c-toolbar__item pf-m-pagination"> <div class="pf-v5-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md" > <div class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md" > <button class="pf-v5-c-menu-toggle pf-m-plain pf-m-text" type="button" aria-expanded="false" id="toolbar-attribute-value-search-filter-mobile-example-pagination-menu-toggle" > <span class="pf-v5-c-menu-toggle__text"> <b>1 - 10</b> of  <b>36</b> </span> <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> <nav class="pf-v5-c-pagination__nav" aria-label="Pagination"> <div class="pf-v5-c-pagination__nav-control pf-m-prev"> <button class="pf-v5-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-v5-c-pagination__nav-control pf-m-next"> <button class="pf-v5-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-v5-c-toolbar__expandable-content pf-m-expanded" id="toolbar-attribute-value-search-filter-mobile-example-expandable-content" > <div class="pf-v5-c-toolbar__item pf-m-search-filter"> <div class="pf-v5-c-input-group" aria-label="search filter" role="group" > <div class="pf-v5-c-input-group__item"> <button class="pf-v5-c-menu-toggle" type="button" aria-expanded="false" id="toolbar-attribute-value-search-filter-mobile-example-search-filter-menu" > <span class="pf-v5-c-menu-toggle__icon"> <i class="fas fa-filter" aria-hidden="true"></i> </span> <span class="pf-v5-c-menu-toggle__text">Name</span> <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> </div> <div class="pf-v5-c-input-group__item pf-m-fill"> <div class="pf-v5-c-text-input-group"> <div class="pf-v5-c-text-input-group__main pf-m-icon"> <span class="pf-v5-c-text-inp