13 Toolbar

13.1 Toolbar

The Toolbar should be used at the top of different listing pages (e.g. Cards and Tables) to allow for sorting, filtering, pagination, and display view toggles. The Toolbar is likely to include other components over time. If a particular Toolbar component is not applicable to the dataset displayed it should be removed from that toolbar.

The Toolbar should display on any type of listing page once a record is added. If there is only an "Add" action and no records yet the Toolbar should not display.

The ALT text for the sort and filter icons should never be removed as this is an accessibility consideration.

Considering localization, if the Sort value character length exceeds the visible space, on click the drop-down will show the full value and upon selection of the value it should be truncated to fit within the visible space.

When no filters have been applied or selected the display should not render the filter list.

<div class="y-toolbar__wrapper">
	<div class="y-toolbar">
		<div class="y-toolbar__item y-toolbar__item-filter y-toolbar__dropdown ">
			<a href="#desktopToolbarFilterMenu"  class="y-toolbar__btn y-toolbar__btn--caption" role="button" data-toggle="collapse" aria-exapnded="false" aria-controls="desktopToolbarFilterMenu">
				<span class="hyicon hyicon-filter" title="filter"></span>
			</a>
		</div>
		<div class="y-toolbar__item y-toolbar__item-sort y-toolbar__dropdown">
			<a href="#" class="y-toolbar__btn y-toolbar__btn--caption " role="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
				<span class="hyicon hyicon-sort" aria-hidden="true" title="sort"></span><strong> Newest </strong> <span class="glyphicon glyphicon-chevron-down y-toolbar__dropdown__icon" aria-hidden="true"></span>
			</a>
			<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
				<li><a href="#">Newest</a></li>
				<li><a href="#">Name A-Z</a></li>
				<li><a href="#">Name Z-A</a></li>
				<li role="separator" class="divider"></li>
				<li><a href="#">Price</a></li>
			</ul>
		</div>
		<div class="y-toolbar__right">
			<nav class="y-toolbar__item">
				<span class="pagination-items">283 Items</span>
				<ul class="pagination">
					<li class="disabled">
						<a href="#" aria-label="Previous">
							<span aria-hidden="true">&laquo;</span>
						</a>
					</li>
					<li class="active"><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li>
						<a href="#" aria-label="Next">
							<span aria-hidden="true">&raquo;</span>
						</a>
					</li>
				</ul>
			</nav>
			<div class="y-toolbar__item y-toolbar__item-toggles hidden-sm hidden-xs">
				<a href="#" role="button" class="y-toolbar__btn y-toolbar__btn--active" aria-pressed="true" aria-label="">
					<span class="hyicon hyicon-list" title="list"></span>
				</a>
				<a href="#" role="button" class="y-toolbar__btn y-toolbar__btn--inactive" aria-pressed="false" aria-label="">
					<span class="hyicon hyicon-grid" title="grid"></span>
				</a>
			</div>
		</div>
		<div class="collapse y-filter-bar" id="desktopToolbarFilterMenu">
		   <div class="y-toolbar__wrapper">
			   <div class="y-toolbar">
				   <div class="y-toolbar__item y-toolbar__dropdown">
					   <a href="#" class="y-toolbar__btn y-toolbar__btn--caption " role="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" >
						   <strong> Color </strong> <span class="glyphicon glyphicon-chevron-down y-toolbar__dropdown__icon" aria-hidden="true"></span>
					   </a>
					   <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
						   <li><a href="#">Red</a></li>
						   <li><a href="#">Pink</a></li>
						   <li><a href="#">Gold</a></li>
					   </ul>
				   </div>
				   <div class="y-toolbar__item y-toolbar__dropdown">
					   <a href="#" class="y-toolbar__btn y-toolbar__btn--caption " role="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" >
						   <strong> Size </strong> <span class="glyphicon glyphicon-chevron-down y-toolbar__dropdown__icon" aria-hidden="true"></span>
					   </a>
					   <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
						   <li><a href="#">extra-small</a></li>
						   <li><a href="#">Small</a></li>
						   <li><a href="#">Medium</a></li>
						   <li><a href="#">Large</a></li>
					   </ul>
				   </div>
			   </div>
		   </div>
		</div>
	</div>
</div>

13.1.1 Toolbar

When filters have been applied or selected the display should render the filter list. It is important to note that hte filter list should display BELOW the collapsable container.

<div class="y-toolbar__wrapper">
	<div class="y-toolbar">
		<div class="y-toolbar__item y-toolbar__item-filter y-toolbar__dropdown ">
			<a href="#desktopToolbarFilterMenu2"  class="y-toolbar__btn y-toolbar__btn--caption" role="button" data-toggle="collapse" aria-exapnded="false" aria-controls="desktopToolbarFilterMenu2">
				<span class="hyicon hyicon-filter" title="filter"></span>
			</a>
		</div>
		<div class="y-toolbar__item y-toolbar__item-sort y-toolbar__dropdown">
			<a href="#" class="y-toolbar__btn y-toolbar__btn--caption " role="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
				<span class="hyicon hyicon-sort" aria-hidden="true" title="sort"></span><strong> Newest </strong> <span class="glyphicon glyphicon-chevron-down y-toolbar__dropdown__icon" aria-hidden="true"></span>
			</a>
			<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
				<li><a href="#">Newest</a></li>
				<li><a href="#">Name A-Z</a></li>
				<li><a href="#">Name Z-A</a></li>
				<li role="separator" class="divider"></li>
				<li><a href="#">Price</a></li>
			</ul>
		</div>
		<div class="y-toolbar__right">
			<nav class="y-toolbar__item">
				<span class="pagination-items">283 Items</span>
				<ul class="pagination">
					<li class="disabled">
						<a href="#" aria-label="Previous">
							<span aria-hidden="true">&laquo;</span>
						</a>
					</li>
					<li class="active"><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li>
						<a href="#" aria-label="Next">
							<span aria-hidden="true">&raquo;</span>
						</a>
					</li>
				</ul>
			</nav>
			<div class="y-toolbar__item y-toolbar__item-toggles hidden-sm hidden-xs">
				<a href="#" role="button" class="y-toolbar__btn y-toolbar__btn--active" aria-pressed="true" aria-label="">
					<span class="hyicon hyicon-list" title="list"></span>
				</a>
				<a href="#" role="button" class="y-toolbar__btn y-toolbar__btn--inactive" aria-pressed="false" aria-label="">
					<span class="hyicon hyicon-grid" title="grid"></span>
				</a>
			</div>
		</div>
		<div class="collapse y-filter-bar" id="desktopToolbarFilterMenu2">
		   <div class="y-toolbar__wrapper">
			   <div class="y-toolbar">
				   <div class="y-toolbar__item y-toolbar__dropdown">
					   <a href="#" class="y-toolbar__btn y-toolbar__btn--caption " role="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" >
						   <strong> Color </strong> <span class="glyphicon glyphicon-chevron-down y-toolbar__dropdown__icon" aria-hidden="true"></span>
					   </a>
					   <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
						   <li><a href="#">Red</a></li>
						   <li><a href="#">Pink</a></li>
						   <li><a href="#">Gold</a></li>
					   </ul>
				   </div>
				   <div class="y-toolbar__item y-toolbar__dropdown">
					   <a href="#" class="y-toolbar__btn y-toolbar__btn--caption " role="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" >
						   <strong> Size </strong> <span class="glyphicon glyphicon-chevron-down y-toolbar__dropdown__icon" aria-hidden="true"></span>
					   </a>
					   <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
						   <li><a href="#">extra-small</a></li>
						   <li><a href="#">Small</a></li>
						   <li><a href="#">Medium</a></li>
						   <li><a href="#">Large</a></li>
					   </ul>
				   </div>
			   </div>
		   </div>
		</div>
		<div class="y-filter-list">
		  <ul class="y-filter-list__applied text-capitalize">
		    <li><span class="y-filter-list__label">Color</span><a href="#"><span class="y-filter-list__type">Red</span><span class="hyicon hyicon-filterremove y-filter-list__remove"/></span></a></li>
			<li><span class="y-filter-list__label">Size</span><a href="#"><span class="y-filter-list__type">Small</span><a href="#"><span class="hyicon hyicon-filterremove y-filter-list__remove"/></span></a></li>
		    <li> <a href="#" class="y-filter-list__clear text-uppercase">Clear All</a>
	      </ul>
	    </div>
	</div>
</div>

13.1.2 ToolbarExample

Visual Guidelines

<div class="text-left thumbnails">
   <div class="row">
        <div class="col-md-4">
            <a class="js_fullscreen text-center" data-toggle="modal" data-id="../images/fullscreen/filter_single_attributes.png" title="View Full Image" href="#viewFullscreen">
                <img src="../images/thumbnails/thump_single.png" alt="single" class="img-thumbnail">
                <p>Filters - Single Attribute/Facet</p>
            </a>
        </div>
        <div class="col-md-4">
            <a class="js_fullscreen text-center" data-toggle="modal" data-id="../images/fullscreen/filter_multiple_attributes.png" title="View Full Image" href="#viewFullscreen">
                <img src="../images/thumbnails/thump_multi.png" alt="multi" class="img-thumbnail">
                <p>Filters - Multiple Attribute/Facet</p>
            </a>
        </div>
        <div class="col-md-4">
            <a class="js_fullscreen text-center" data-toggle="modal" data-id="../images/fullscreen/sort.png" title="View Full Image" href="#viewFullscreen">
                <img src="../images/thumbnails/thump_sort.png" alt="sort" class="img-thumbnail">
                <p>Sort</p>
            </a>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-lg" id="viewFullscreen">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
        <div>
            <img src="" class="showFullscreen">
        </div>
    </div>
</div>