Toolbar

Toolbar

The Toolbar pattern sits above a content view such as a List View, Card View or Table View. The Toolbar provides a framework for a number of content control patterns including, but not limited to:

These controls may be used either together or individually, and may be substituted for other components. The Toolbar pattern should be used any time controls are needed for a content view.

Toolbar With All Components

Toolbar with active filters

With pagination

Toolbar with pagination

With Alternate Filter

Toolbar pattern with callouts

Without Bulk Selector

Toolbar pattern with callouts

Without Find and View Selector

Toolbar pattern with callouts

Without View Selector

Toolbar pattern with callouts

Without Filter

Toolbar pattern with callouts

Toolbar

Toolbar pattern with callouts

  1. Bulk Selector: Enables a user to quickly select or unselect all elements on the current page by clicking the checkbox. Optionally allows a user to quickly select or unselect all elements associated with a specific state, if supported.

  2. Filter: Enables a user to quickly reduce the number of content items on screen at one time by applying stackable filters to a content view.

  3. Component Divider: Visually and spatially separates the toolbar’s component patterns. No divider is needed between left-aligned and right-aligned sets of patterns because they are separated by a significant space.

  4. Sort: Helps users make sense of content by ordering it in a logical fashion based on a single attribute. Refer to the Sort design page for more details.

  5. Column Visibility: Enables users to define what columns are visible within a table. - Only displays for the table view. If the user changes the view to something other than the table view, then this icon does not display in the toolbar. Refer to the Table View design page for more details. - If Sort controls are included in the toolbar, then this icon displays in the same control group as Sort and is the last item in this group. If sort controls are not included, then the this icon displays in the same position that is shown for the Sort control group in the Layouts section below.

  6. Actions: Contains actions for one or more pieces of content in the current view.

  7. Find: Locates a specific item or items by automatically scrolling or paging to all occurrences of an entered query. Unlike filtering, it does not remove content from the view.

  8. View Selector: The View Selector allows the user to switch between different views of the same data set.

  9. Content and Results Count: Shows the number of content items that satisfy all currently applied filters, as well as the total number of items and the type of item. If no filters are applied, only the total number of items and the item type are displayed (e.g. 40 Virtual Machines). May be displayed to the left of right-aligned content if stackable filters are disabled.

  10. Active Filters: A component of the filter tool that contains a list of all currently active filters as well as the Clear All Filters action. Not displayed if stackable filters are disabled.

  11. Pagination: A necessary control that is present both above and below content views that allows for navigation between pages without needing to scroll. Refer to the Pagination design page for more details.

Layouts

The Toolbar can take different shapes depending on which content controls are included.

Toolbar pattern with callouts

Toolbar pattern with callouts

The content controls should be arranged according to the above templates. If one or more component patterns are not needed, the remaining patterns should align to the edge of the toolbar rather than leaving an empty space for the missing pattern.

Icons and Tooltip text

To support accessibility, icon buttons that display in the toolbar should include tooltip text using the Tooltip widget and screenreader text using the aria-label attribute. The Tooltip widget supports keyboard accessibility, whereas the html title attribute does not.

The following text is recommended for the set of icons displayed in the example above.

Icon Class Name Tooltip Text Screenreader Text (aria-label) Comments
fa-sort-alpha-asc Sort A to Z Sorted A to Z. Toggle to sort Z to A. Displays in the Sort control group (see callout 3). This icon and text would display regardless of data type. The icon and text use “A to Z” as an example to communicate sort order, and are not intended to indicate type of data that displays in the selected column. Refer to the Sort design page for more details of available sort icons and when they should be used.
fa-sort-alpha-desc Sort Z to A Sorted Z to A. Toggle to sort A to Z. Displays in the Sort control group (see callout 3). See comments in previous row.
fa-column Show/hide columns Show/hide columns Displays in the Sort control group (see callout 4)
fa-ellipsis-v More actions More actions Displays in the Actions control group (see callout 5)
fa-search Find Find Displays in the Find control group (see callout 6)
fa-th Table view Table view Displays in the View control group (see callout 7)
fa-th-large List view List view Displays in the View control group (see callout 7)
fa-th-list Card view Card view Displays in the View control group (see callout 7)
pficon-close [none] Clear filter Displays in the Active Filters row (see callout 8). Tooltip text is not needed for the X icon since the action associated with X is more obvious to users. However, screenreader text is still needed.

PatternFly Core Example


Example

1 of 3
40 Results

Active filters:

  • Name: nameofthething
  • Name: nameofthething
  • Name: nameofthething

Clear All Filters

Reference Markup

      <div class="container-fluid">
        <div class="row toolbar-pf">
          <div class="col-sm-12">
            <form class="toolbar-pf-actions">
              <div class="form-group toolbar-pf-filter">
                <label class="sr-only" for="filter">Name</label>
                <div class="input-group">
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" id="input-filter-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li class="selected"><a href="#">Name</a></li>
                      <li><a href="#">Type</a></li>
                      <li><a href="#">Color</a></li>
                    </ul>
                  </div><!-- /btn-group -->
                  <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
                </div><!-- /input-group -->
              </div>
              <div class="form-group">
                <div class="dropdown btn-group">
                  <button type="button" class="btn btn-default dropdown-toggle" id="filter-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li class="selected"><a href="#">Name</a></li>
                    <li><a href="#">Type</a></li>
                    <li><a href="#">Last Modified</a></li>
                  </ul>
                </div>
                <button class="btn btn-link" type="button">
                  <span class="fa fa-sort-alpha-asc"></span>
                </button>
              </div>
              <div class="form-group">
                <button class="btn btn-default" type="button">Action</button>
                <button class="btn btn-default" type="button">Action</button>
                <div class="dropdown btn-group  dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu " aria-labelledby="dropdownKebab">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

              </div>
              
              
              <div class="toolbar-pf-action-right">
                <div class="form-group toolbar-pf-find">
                  <button class="btn btn-link btn-find" type="button">
                    <span class="fa fa-search"></span>
                  </button>
                  <div class="find-pf-dropdown-container">
                    <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
                    <div class="find-pf-buttons">
                      <span class="find-pf-nums">1 of 3</span>
                      <button class="btn btn-link" type="button">
                        <span class="fa fa-angle-up"></span>
                      </button>
                      <button class="btn btn-link" type="button">
                        <span class="fa fa-angle-down"></span>
                      </button>
                      <button class="btn btn-link btn-find-close" type="button">
                        <span class="pficon pficon-close"></span>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group toolbar-pf-view-selector">
                  <button class="btn btn-link "><i class="fa fa-th"></i></button>
                  <button class="btn btn-link "><i class="fa fa-th-large"></i></button>
                  <button class="btn btn-link "><i class="fa fa-th-list"></i></button>
                </div>
              </div>
            </form>
            <div class="row toolbar-pf-results">
              <div class="col-sm-12">
                <h5>40 Results</h5>
                <p>Active filters:</p>
                <ul class="list-inline">
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="fa fa-times"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="fa fa-times"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="fa fa-times"></span></a>
                    </span>
                  </li>
                </ul>
                <p><a href="#">Clear All Filters</a></p>
              </div><!-- /col -->
            </div><!-- /row -->
          </div><!-- /col -->
        </div><!-- /row -->
      </div><!-- /container -->

<script>
(function($) {
  $(document).ready(function() {
    // Upon clicking the find button, show the find dropdown content
    $(".btn-find").click(function () {
      $(this).parent().find(".find-pf-dropdown-container").toggle();
    });
    // Upon clicking the find close button, hide the find dropdown content
    $(".btn-find-close").click(function () {
      $(".find-pf-dropdown-container").hide();
    });
  });
})(jQuery);
</script>