Dropdown

Defines different styles for a toggleable dropdown.

The Dropdown component is aim-aware. This means the dropdown stays open as long as the mouse pointer moves towards the dropdown. An additional delay ensures that the dropdown stays open even if the mouse pointer shortly moves in another direction. A dropdown closes immediately if another menu item is hovered.

Usage

A dropdown is an example of the drop that provides its own styling. Any content, like a button, can toggle a dropdown. Just add the uk-dropdown attribute to a block element following the toggle.

Copy to clipboard 
  • <button class="uk-button uk-button-default" type="button">Hover</button>
<div class="uk-drop uk-dropdown" uk-dropdown>
  <ul class="uk-dropdown-nav uk-nav">
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li class="uk-nav-header">Header</li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="uk-nav-divider"></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

<button class="uk-button uk-button-default" type="button">Click</button>
<div class="uk-drop uk-dropdown" uk-dropdown="mode: click">
  <ul class="uk-dropdown-nav uk-nav">
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li class="uk-nav-header">Header</li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="uk-nav-divider"></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>
Customize