ui/docs/content/3.components/context-menu.md

title, description, links

title	description	links
ContextMenu	A menu to display actions when right-clicking on an element.	label icon to ContextMenu i-custom-radix-vue https://www.radix-vue.com/components/context-menu.html label icon to GitHub i-simple-icons-github https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/ContextMenu.vue

Usage

Use anything you like in the default slot of the ContextMenu, and right-click on it to display the menu.

Items

Use the items prop 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"{lang="ts-type"}
• disabled?: boolean{lang="ts-type"}
• class?: any{lang="ts-type"}
• slot?: string{lang="ts-type"}
• select?(e: Event): void{lang="ts-type"}

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

::component-code

prettier: true collapse: true ignore:

• items

• class external:

• items class: 'justify-center' props: items:

  • • label: Appearance children:
      • label: System icon: i-heroicons-computer-desktop
      • label: Light icon: i-heroicons-sun
      • label: Dark icon: i-heroicons-moon
  • • label: Show Sidebar kbds:
      • meta
      • s
    • label: Show Toolbar kbds:
      • shift
      • meta
      • d
    • label: Collapse Pinned Tabs disabled: true
  • • label: Refresh the Page
    • label: Clear Cookies and Refresh
    • label: Clear Cache and Refresh
    • type: separator
    • label: Developer children:
      • • label: View Source kbds:
          • meta
          • shift
          • u
        • label: Developer Tools kbds:
          • option
          • meta
          • i
        • label: Inspect Elements kbds:
          • option
          • meta
          • c
      • • label: JavaScript Console kbds:
          • option
          • meta
          • j class: 'w-48' slots: default: |
  Right click here

---

:div{class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72"}[Right click here] ::

::tip Each item can take a children array to create a nested menu which can be controlled using the open, defaultOpen and content properties. ::

Size

Use the size prop to change the size of the ContextMenu.

::component-code

prettier: true ignore:

• items

• class external:

• items class: 'justify-center' props: size: xl items:

  • label: System icon: i-heroicons-computer-desktop
  • label: Light icon: i-heroicons-sun
  • label: Dark icon: i-heroicons-moon class: 'w-48' slots: default: |
  Right click here

---

:div{class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72"}[Right click here] ::

Disabled

Use the disabled prop to disable the ContextMenu.

::component-code

prettier: true ignore:

• items

• class external:

• items class: 'justify-center' props: disabled: true items:

  • label: System icon: i-heroicons-computer-desktop
  • label: Light icon: i-heroicons-sun
  • label: Dark icon: i-heroicons-moon class: 'w-48' slots: default: |
  Right click here

---

:div{class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72"}[Right click here] ::

Examples

With custom slot

Use the slot property to customize a specific item.

You will have access to the following slots:

• #{{ item.slot }}{lang="ts-type"}
• #{{ item.slot }}-leading{lang="ts-type"}
• #{{ item.slot }}-label{lang="ts-type"}
• #{{ item.slot }}-trailing{lang="ts-type"}

::component-example

name: 'context-menu-custom-slot-example' class: 'justify-center'

::

::tip{to="#slots"} You can also use the #item, #item-leading, #item-label and #item-trailing slots to customize all items. ::

API

Props

::component-props

ignore:

• as
• to
• target
• active
• activeClass
• inactiveClass
• exactActiveClass
• ariaCurrentValue
• href
• rel
• noRel
• prefetch
• noPrefetch
• prefetchedClass
• replace
• exact
• exactQuery
• exactHash
• external

---

::

Slots

:component-slots

Emits

:component-emits

Theme

:component-theme