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 data-uk-dropdown attribute to a block element following the toggle.

- Active
- Item
- Header
- Item
- Item
- Item
- Active
- Item
- Header
- Item
- Item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<button class="uk-btn uk-btn-default mr-2" type="button">Hover</button>
<div class="uk-drop uk-dropdown min-w-72" data-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-btn uk-btn-default" type="button">Click</button>
<div class="uk-drop uk-dropdown min-w-72" data-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>

Something's not working? Feel free to report an issue or edit this snippet .

<div>
  <button className="uk-btn uk-btn-default mr-2" type="button">Hover</button>
  <div className="uk-drop uk-dropdown min-w-72" data-uk-dropdown>
    <ul className="uk-dropdown-nav uk-nav">
      <li className="uk-active"><a href="#">Active</a></li>
      <li><a href="#">Item</a></li>
      <li className="uk-nav-header">Header</li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li className="uk-nav-divider" />
      <li><a href="#">Item</a></li>
    </ul>
  </div>
  <button className="uk-btn uk-btn-default" type="button">Click</button>
  <div className="uk-drop uk-dropdown min-w-72" data-uk-dropdown="mode: click">
    <ul className="uk-dropdown-nav uk-nav">
      <li className="uk-active"><a href="#">Active</a></li>
      <li><a href="#">Item</a></li>
      <li className="uk-nav-header">Header</li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li className="uk-nav-divider" />
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</div>

On This Page
Usage