Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.

<div class="k-dropdown">
    <a class="k-dropdown__toggle" data-k-toggle="dropdown" href="#">
        Dropdown trigger
        <span class="k-caret" aria-hidden="true"></span>
    </a>
    <ul class="k-dropdown__menu" role="menu">
        <li><a href="#">Dropdown item 1</a></li>
        <li><a href="#">Dropdown item 2</a></li>
        <li><a href="#">Dropdown item 3</a></li>
    </ul>
</div>

Dropup

Drop it up when dropdown item is located at the bottom of a view.

<div class="k-dropdown k-dropdown--dropup">
    <a class="k-dropdown__toggle" data-k-toggle="dropdown" href="#">
        Dropup trigger
        <span class="k-caret" aria-hidden="true"></span>
    </a>
    <ul class="k-dropdown__menu" role="menu">
        <li><a href="#">Dropdown item 1</a></li>
        <li><a href="#">Dropdown item 2</a></li>
        <li><a href="#">Dropdown item 3</a></li>
    </ul>
</div>

Dropdown divider

Add a divider between dropdown items.

<li class="k-dropdown__divider"></li>

Dropdown grid

Display a list of icons or images in a grid.

<div class="k-dropdown">
    <a class="k-dropdown__toggle" data-k-toggle="dropdown" href="#">
        Dropdown trigger
        <span class="k-caret" aria-hidden="true"></span>
    </a>
    <ul class="k-dropdown__menu k-dropdown__menu--grid">
        <li>
            <a href="#">
                <span class="k-icon-document-archive" aria-hidden="true"></span>
                <span class="k-visually-hidden">Archive icon</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="k-icon-document-audio" aria-hidden="true"></span>
                <span class="k-visually-hidden">Audio icon</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="k-icon-document-default" aria-hidden="true"></span>
                <span class="k-visually-hidden">Default icon</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="k-icon-document-document" aria-hidden="true"></span>
                <span class="k-visually-hidden">Document icon</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="k-icon-document-image" aria-hidden="true"></span>
                <span class="k-visually-hidden">Image icon</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="k-icon-document-pdf" aria-hidden="true"></span>
                <span class="k-visually-hidden">PDF icon</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="k-icon-document-spreadsheet" aria-hidden="true"></span>
                <span class="k-visually-hidden">Spreadsheet icon</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="k-icon-document-video" aria-hidden="true"></span>
                <span class="k-visually-hidden">Video icon</span>
            </a>
        </li>
        <li class="k-dropdown__block-item">
            <a href="#">Block level item</a>
        </li>
    </ul>
</div>

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!