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.

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

<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>

Theme development

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
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. 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`	`*`