A menu that opens from a trigger you provide and closes on outside click. The trigger slot receives `{ open, toggle }` and the default slot receives `{ close }`. Fill it with UiDropdownItem rows.
Examples
Action menu
A button trigger with a set of items.
<UiDropdown>
<template #trigger="{ toggle }">
<UiButton variant="outline" color="gray" @click="toggle">
Actions <UiIcon name="mdi:menu-down" class="w-4 h-4" />
</UiButton>
</template>
<UiDropdownItem icon="mdi:pencil" label="Edit" />
<UiDropdownItem icon="mdi:content-copy" label="Duplicate" shortcut="⌘D" />
<UiDropdownItem icon="mdi:trash-can-outline" label="Delete" color="red" />
</UiDropdown>Right-aligned, drop-up
align and drop position the panel; here it aligns to the trigger’s right edge and opens upward.
<div class="flex justify-end">
<UiDropdown align="right" drop="up" width="w-48">
<template #trigger="{ toggle }">
<UiButton variant="ghost" color="gray" icon-only aria-label="More" @click="toggle">
<UiIcon name="mdi:dots-vertical" class="w-5 h-5" />
</UiButton>
</template>
<UiDropdownItem icon="mdi:pencil" label="Rename" />
<UiDropdownItem icon="mdi:archive-outline" label="Archive" />
</UiDropdown>
</div>Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | 'w-56' | Panel width class. |
| align | string | 'left' | Horizontal alignment to the trigger. leftright |
| drop | string | 'down' | Open upwards or downwards. downup |
| panelClass | string | '' | Extra classes for the panel. |
Events
| Event | Payload | Description |
|---|---|---|
open | void | Emitted when the menu opens. |
close | void | Emitted when the menu closes. |
Slots
| Slot | Description |
|---|---|
trigger | The opener. Receives { open: boolean, toggle: Function }. |
default | Menu content. Receives { close: Function }. |