ContextMenu

A menu to display actions when right-clicking on an element.

Based on Reka UI ContextMenu

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?: ContextMenuItem[] | ContextMenuItem[][]{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.

• size: to change the size of the ContextMenu.
• modal: to control whether the ContextMenu blocks interaction with outside content.
• disabled: to disable the ContextMenu.
• slot:

Usage

<UContextMenu
  <!-- props here -->
/>

Slots

• #item