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:

  • Filter
  • Sort
  • Actions
  • Find
  • Change View

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

Example

1 of 3
40 Results

Active filters:

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

Clear All Filters

Description

Toolbar

  1. Filter: Enables a user to quickly reduce the amount on screen at one time by applying stackable filters to a content view.
  2. 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.
  3. Sort: Helps users make sense of content by ordering it in a logical fashion based on a single attribute.
  4. Actions: Contains actions for one or more pieces of content in the current view.
  5. 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.
  6. Change View: Allows users to utilize the advantages of different content representations by switching between ways of visualizing the same dataset.
  7. Active Filters: A Component of Simple Filter that contains a list of all currently active filters as well as the Clear All Filters action. Not displayed if stackable filters are disabled.
  8. 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.

Layouts

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

Toolbar

Toolbar

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.

Without Simple Filter

Toolbar

Without Find and Change View

Toolbar

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" 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" 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="pficon pficon-close"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></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>