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 controls are needed for a content view.
Toolbar With All Components
With Alternate Filter
Without Find and Change View
Without Change View
Without Filter
Toolbar
-
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.
-
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.
-
Sort: Helps users make sense of content by ordering it in a logical fashion based on a single attribute.
-
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.
-
Actions: Contains actions for one or more pieces of content in the current view.
-
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.
-
Change View: Allows users to utilize the advantages of different content representations by switching between ways of visualizing the same dataset.
-
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.
-
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.
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-asc | Sort Z to A | 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. | |
| fa-sort-desc | Sort A to Z | 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. |
Example
<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>