UiDropdown

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.

Ejemplos

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

Nombre	Tipo	Por defecto	Descripción
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.

Eventos

Evento	Datos	Descripción
`open`	`void`	Emitted when the menu opens.
`close`	`void`	Emitted when the menu closes.

Slots

Slot	Descripción
`trigger`	The opener. Receives { open: boolean, toggle: Function }.
`default`	Menu content. Receives { close: Function }.

Primeros pasos

Actions

Forms

Overlays

Feedback