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>

Add a divider between dropdown items.

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

    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.