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.

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

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.