A row that reveals a nested set of items on hover or focus. Give it an icon and label; put UiDropdownItem rows in its default slot.
Examples
Nested menu
A submenu opened from a dropdown.
<UiDropdown>
<template #trigger="{ toggle }">
<UiButton variant="outline" color="gray" @click="toggle">
More <UiIcon name="mdi:menu-down" class="w-4 h-4" />
</UiButton>
</template>
<UiDropdownItem icon="mdi:share-variant" label="Share" />
<UiDropdownSubmenu icon="mdi:export" label="Export as">
<UiDropdownItem icon="mdi:file-pdf-box" label="PDF" />
<UiDropdownItem icon="mdi:file-image" label="PNG" />
</UiDropdownSubmenu>
</UiDropdown>Props
| Name | Type | Default | Description |
|---|---|---|---|
| iconrequired | string | — | Leading MDI icon. |
| labelrequired | string | — | Row label. |
| disabled | boolean | false | Disables the submenu. |
| alignLeft | boolean | false | Open the submenu to the left. |
Slots
| Slot | Description |
|---|---|
default | Submenu items (typically UiDropdownItem components). |