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:

Filters...
<!-- 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.

Join 23000+ others and subscribe to our newsletter!