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!