1# DropdownMenu
2 
3A menu to display actions when clicking on an element.
4 
5> Based on [Reka UI DropdownMenu](https://reka-ui.com/docs/components/dropdown-menu)
6 
7## Key Props
8 
9- `items`: as an array of objects with the following properties:
10 
11- `label?: string`{lang="ts-type"}
12- `icon?: string`{lang="ts-type"}
13- `avatar?: AvatarProps`{lang="ts-type"}
14- `kbds?: string[] | KbdProps[]`{lang="ts-type"}
15- [`type?: "link" | "label" | "separator" | "checkbox"`{lang="ts-type"}](#with-checkbox-items)
16- [`color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}](#with-color-items)
17- [`checked?: boolean`{lang="ts-type"}](#with-checkbox-items)
18- `disabled?: boolean`{lang="ts-type"}
19- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
20- `onSelect?: (e: Event) => void`{lang="ts-type"}
21- [`onUpdateChecked?: (checked: boolean) => void`{lang="ts-type"}](#with-checkbox-items)
22- `children?: DropdownMenuItem[] | DropdownMenuItem[][]`{lang="ts-type"}
23- `class?: any`{lang="ts-type"}
24- `ui?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }`{lang="ts-type"}
25 
26You can pass any property from the [Link](/docs/components/link#props) component such as `to`, `target`, etc.
27 
28- `content`: to control how the DropdownMenu content is rendered, like its `align` or `side` for example.
29- `arrow`: to display an arrow on the DropdownMenu.
30- `size`: to control the size of the DropdownMenu.
31- `modal`: to control whether the DropdownMenu blocks interaction with outside content.
32- `disabled`: to disable the DropdownMenu.
33- `slot`:
34 
35## Usage
36 
37```vue
38<UDropdownMenu
39  <!-- props here -->
40/>
41```
42 
43## Slots
44 
45- `#item`
46