DropdownMenu

A menu to display actions when clicking on an element.

Based on Reka UI DropdownMenu

Key Props

• items: as an array of objects with the following properties:

• label?: string{lang="ts-type"}
• icon?: string{lang="ts-type"}
• avatar?: AvatarProps{lang="ts-type"}
• kbds?: string[] | KbdProps[]{lang="ts-type"}
• type?: "link" | "label" | "separator" | "checkbox"{lang="ts-type"}
• color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"{lang="ts-type"}
• checked?: boolean{lang="ts-type"}
• disabled?: boolean{lang="ts-type"}
• slot?: string{lang="ts-type"}
• onSelect?: (e: Event) => void{lang="ts-type"}
• onUpdateChecked?: (checked: boolean) => void{lang="ts-type"}
• children?: DropdownMenuItem[] | DropdownMenuItem[][]{lang="ts-type"}
• class?: any{lang="ts-type"}
• 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"}

You can pass any property from the Link component such as to, target, etc.

• content: to control how the DropdownMenu content is rendered, like its align or side for example.
• arrow: to display an arrow on the DropdownMenu.
• size: to control the size of the DropdownMenu.
• modal: to control whether the DropdownMenu blocks interaction with outside content.
• disabled: to disable the DropdownMenu.
• slot:

Usage

<UDropdownMenu
  <!-- props here -->
/>

Slots

• #item