Scope bar
A scope bar appears below the toolbar (or breadcrumbs when used) and allows users to narrow down the show object by a search operation or using filters.
<form class='k-js-grid'>
<!-- Scopebar --->
<div class="k-scopebar k-js-scopebar">
<!-- Filters -->
<div class="k-dynamic-content-holder">
<div class="k-js-filters">
<div data-filter data-title="Status" data-count="0">
<select class="k-js-select2" name="enabled" data-placeholder="- Select -">
<option value="" class="level1">- Select -</option>
<option value="1" class="level1">Published</option>
<option value="0" class="level1">Unpublished</option>
</select>
</div>
<div data-filter data-title="what" data-count="0">
<select class="k-js-select2" name="what" data-placeholder="Something else">
<option value="" class="level1">Something else</option>
<option value="1" class="level1">Yes!</option>
<option value="0" class="level1">No!</option>
</select>
</div>
</div>
</div>
<div class="k-scopebar__item k-scopebar__item--filters">
<div class="k-scopebar__filters-content">
<div class="k-scopebar__filters k-js-filter-container">
<div style="display: none;" class="k-scopebar__item--filter k-scopebar-dropdown k-js-filter-prototype k-js-dropdown">
<button type="button" class="k-scopebar-dropdown__button k-js-dropdown-button">
<span class="k-scopebar__item--filter__title k-js-dropdown-title"></span>
<span class="k-scopebar__item--filter__icon k-icon-chevron-bottom" aria-hidden="true"></span>
<div class="k-scopebar__item__label k-js-dropdown-label"></div>
</button>
<div class="k-scopebar-dropdown__body k-js-dropdown-body">
<div class="k-scopebar-dropdown__body__buttons">
<button type="button" class="k-button k-button--default k-js-clear-filter">Clear</button>
<button type="button" class="k-button k-button--primary k-js-apply-filter">Apply</button>
</div>
</div>
</div>
</div><!-- .k-scopebar__filters -->
</div><!-- .k-scopebar__filters-content -->
</div><!-- .k-scopebar__item -->
<!-- Search -->
<div class="k-scopebar__item k-scopebar__item--search">
<div class="k-search k-search--has-both-buttons">
<label for="input-scopebar-1">Search</label>
<input type="search" class="k-search__field" placeholder="Search…" id="input-scopebar-1" />
<button type="submit" class="k-search__submit">
<span class="k-icon-magnifying-glass" aria-hidden="true"></span>
<span class="k-visually-hidden">Search icon</span>
</button>
<button type="button" class="k-search__empty ">
<span class="k-search__empty-area">
<span class="k-icon-disabled" aria-hidden="true"></span>
<span class="k-visually-hidden">Clear search</span>
</span>
</button>
</div>
</div>
</div><!-- .k-scopebar -->
</form>
Scopebar - breadcrumbs
When you don't need any filters, but do need breadcrumbs, it's possible to combine the two like so:
<!-- Scopebar -->
<div class="k-scopebar k-js-scopebar k-scopebar--breadcrumbs">
<div class="k-scopebar__item k-scopebar__item--breadcrumbs">
<!-- Breadcrumbs -->
<div class="k-breadcrumb">
<ul>
<li class="k-breadcrumb__home">
<a class="k-breadcrumb__content" href="#">
<span class="k-icon-home" aria-hidden="true"></span>
<span class="k-visually-hidden">Home</span>
</a>
</li>
<li>
<a class="k-breadcrumb__content" href="#">
Lorem
</a>
</li>
<li>
<a class="k-breadcrumb__content" href="#">
Ipsum
</a>
</li>
<li class="k-breadcrumb__active">
<span class="k-breadcrumb__content">
Dolor sit amet
</span>
</li>
</ul>
</div><!-- .k-breadcrumb -->
</div>
<!-- Search -->
<div class="k-scopebar__item k-scopebar__item--search">
<div class="k-search k-search--has-both-buttons">
<label for="input-scopebar-breadcrumbs-1">Search</label>
<input type="search" class="k-search__field" placeholder="Search…" id="input-scopebar-breadcrumbs-1" />
<button type="submit" class="k-search__submit">
<span class="k-icon-magnifying-glass" aria-hidden="true"></span>
<span class="k-visually-hidden">Search icon</span>
</button>
<button type="button" class="k-search__empty ">
<span class="k-search__empty-area">
<span class="k-icon-disabled" aria-hidden="true"></span>
<span class="k-visually-hidden">Clear search</span>
</span>
</button>
</div>
</div>
</div><!-- .k-scopebar -->
Scopebar - adding buttons
Need some extra buttons? For example to switch a list layout to a grid layout? Place them like so:
<!-- Scopebar -->
<div class="k-scopebar k-js-scopebar">
<div class="k-scopebar__item k-scopebar__item--filters">
<div class="k-scopebar__filters-content">
<div style="padding: 10px 10px 9px">Filters...</div>
</div><!-- .k-scopebar__filters-content -->
</div><!-- .k-scopebar__item -->
<div class="k-scopebar__item k-scopebar__item--buttons">
<button class="k-scopebar__button">
<span class="k-icon-grid-three-up" aria-hidden="true"></span>
<span class="k-visually-hidden">Grid icon</span>
</button>
</div>
<!-- Search -->
<div class="k-scopebar__item k-scopebar__item--search">
<div class="k-search k-search--has-both-buttons">
<label for="input-scopebar-adding-buttons-1">Search</label>
<input type="search" class="k-search__field" placeholder="Search…" id="input-scopebar-adding-buttons-1" />
<button type="submit" class="k-search__submit">
<span class="k-icon-magnifying-glass" aria-hidden="true"></span>
<span class="k-visually-hidden">Search icon</span>
</button>
<button type="button" class="k-search__empty ">
<span class="k-search__empty-area">
<span class="k-icon-disabled" aria-hidden="true"></span>
<span class="k-visually-hidden">Clear search</span>
</span>
</button>
</div>
</div>
</div><!-- .k-scopebar -->
Need Help?
Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.