We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
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.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js file, add the Dropdown
component within the ui() plugin.
import ui from "franken-ui";
ui({
components: {
dropdown: {
hooks: {},
media: true
}
}
}),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.
<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>Learn more about using hooks.
| Hook Name | Affected Classes |
|---|---|
hook-dropdown | .uk-dropdown |
hook-dropbar | .uk-dropdown-dropbar |
hook-dropbar-large | .uk-dropdown-dropbar-large |
hook-nav | .uk-dropdown-nav |
hook-nav-item | .uk-dropdown-nav > li > a |
hook-nav-item-hover | .uk-dropdown-nav > li > a:hover, .uk-dropdown-nav > li.uk-active > a |
hook-nav-subtitle | .uk-dropdown-nav .uk-nav-subtitle |
hook-nav-header | .uk-dropdown-nav .uk-nav-header |
hook-nav-divider | .uk-dropdown-nav .uk-nav-divider |
hook-misc | * |