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.