Preview

Installation

npx sigma-ui@latest add context-menu

Usage

<script setup lang="ts">
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from '@/components/ui/context-menu';
</script>

<template>
  <ContextMenu>
    <ContextMenuTrigger>Right click</ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem>Profile</ContextMenuItem>
      <ContextMenuItem>Billing</ContextMenuItem>
      <ContextMenuItem>Team</ContextMenuItem>
      <ContextMenuItem>Subscription</ContextMenuItem>
    </ContextMenuContent>
  </ContextMenu>
</template>

• <ContextMenuTrigger> is the area that opens the menu on right-click or long-press.
• Use <ContextMenuCheckboxItem> with v-model and <ContextMenuRadioGroup> / <ContextMenuRadioItem> for items with a checked state.
• Nest <ContextMenuSub>, <ContextMenuSubTrigger> and <ContextMenuSubContent> to build submenus.

Examples

Shortcuts, Submenus and Checkable Items

Combines <ContextMenuShortcut>, a submenu, checkbox items and a radio group in one menu.

<script setup lang="ts">
import { ref } from 'vue';
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from '@/components/ui/context-menu';

const showBookmarks = ref(true);
const person = ref('pedro');
</script>

<template>
  <ContextMenu>
    <ContextMenuTrigger>Right click</ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem>
        Back
        <ContextMenuShortcut>⌘[</ContextMenuShortcut>
      </ContextMenuItem>
      <ContextMenuSub>
        <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
        <ContextMenuSubContent>
          <ContextMenuItem>Save Page As...</ContextMenuItem>
          <ContextMenuItem>Developer Tools</ContextMenuItem>
        </ContextMenuSubContent>
      </ContextMenuSub>
      <ContextMenuSeparator />
      <ContextMenuCheckboxItem v-model="showBookmarks">
        Show Bookmarks Bar
      </ContextMenuCheckboxItem>
      <ContextMenuSeparator />
      <ContextMenuLabel>People</ContextMenuLabel>
      <ContextMenuRadioGroup v-model="person">
        <ContextMenuRadioItem value="pedro">
          Pedro Duarte
        </ContextMenuRadioItem>
        <ContextMenuRadioItem value="colm">
          Colm Tuite
        </ContextMenuRadioItem>
      </ContextMenuRadioGroup>
    </ContextMenuContent>
  </ContextMenu>
</template>

API Reference

ContextMenu

Props

Prop	Type	Default
pressOpenDelay The duration from when the trigger is pressed until the menu opens.	number	700
open The controlled open state of the menu. Can be used as v-model:open.	boolean	-
dir The reading direction of the combobox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction$4	-
modal The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.	boolean	-

Events

Event	Payload
update:open	[payload: boolean]

Slots

Slot	Scope
default The content of the component.	-

ContextMenuTrigger

Props

Prop	Type	Default
disabled When true, the context menu would not open when right-clicking. Note that this will also restore the native context menu.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

ContextMenuContent

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
forceMount Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.	boolean	-
loop When true, keyboard navigation will loop from last item to first, and vice versa.	boolean	false
reference The custom element or virtual element that will be set as the reference to position the floating element. If provided, it will replace the default anchor element.	ReferenceElement	-
memoDependencies Reactive dependencies that should invalidate the memoized content subtree.	unknown[]	-
sideFlip Flip to the opposite side when colliding with boundary.	boolean	true
alignOffset An offset in pixels from the start or end alignment options.	number	0
alignFlip Flip alignment when colliding with boundary. May only occur when prioritizePosition is true.	boolean	true
avoidCollisions When true, overrides the side and align preferences to prevent collisions with boundary edges.	boolean	true
collisionBoundary The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.	Element | (Element | null)[] | null	[]
collisionPadding The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.	number | Partial<Record<"top" | "right" | "bottom" | "left", number>>	0
hideShiftedArrow When true, hides the arrow when it cannot be centered to the reference element.	boolean	true
sticky The sticky behavior on the align axis. partial will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.	"partial" | "always"	"partial"
hideWhenDetached Whether to hide the content when the trigger becomes fully occluded.	boolean	false
positionStrategy The type of CSS position property to use.	"absolute" | "fixed"	-
disableUpdateOnLayoutShift Whether to disable the update position for the content when the layout shifted.	boolean	false
prioritizePosition Force content to be position within the viewport. Might overlap the reference element, which may not be desired.	boolean	false

Events

Event	Payload
escapeKeyDown Event handler called when the escape key is down. Can be prevented.	[event: KeyboardEvent]
pointerDownOutside Event handler called when a pointerdown event happens outside of the DismissableLayer. Can be prevented.	[event: PointerDownOutsideEvent]
focusOutside Event handler called when the focus moves outside of the DismissableLayer. Can be prevented.	[event: FocusOutsideEvent]
interactOutside Event handler called when an interaction happens outside the DismissableLayer. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.	[event: PointerDownOutsideEvent | FocusOutsideEvent]
openAutoFocus	[event: Event]
closeAutoFocus Event handler called when auto-focusing on close. Can be prevented.	[event: Event]

Slots

Slot	Scope
default The content of the component.	-

ContextMenuGroup

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

ContextMenuRadioGroup

Props

Prop	Type	Default
modelValue The value of the selected item in the group.	AcceptableValue	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Events

Event	Payload
update:modelValue Event handler called when the value changes.	[payload: AcceptableValue]

Slots

Slot	Scope
default The content of the component.	-

ContextMenuItem

Props

Prop	Type	Default
disabled When true, prevents the user from interacting with the item.	boolean	-
textValue Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. <br> Use this when the content is complex, or you have non-textual content inside.	string	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
inset Adds left padding to align with items that have an icon or indicator.	boolean	-

Events

Event	Payload
select Event handler called when the user selects an item (via mouse or keyboard). <br> Calling event.preventDefault in this handler will prevent the menu from closing when selecting that item.	[event: Event]

Slots

Slot	Scope
default The content of the component.	-

ContextMenuCheckboxItem

Props

Prop	Type	Default
modelValue The controlled checked state of the item. Can be used as v-model.	CheckedState	-
disabled When true, prevents the user from interacting with the item.	boolean	-
textValue Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. <br> Use this when the content is complex, or you have non-textual content inside.	string	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Events

Event	Payload
update:modelValue Event handler called when the checked state changes.	[payload: boolean]
select Event handler called when the user selects an item (via mouse or keyboard). <br> Calling event.preventDefault in this handler will prevent the menu from closing when selecting that item.	[event: Event]

Slots

Slot	Scope
default The content of the component.	-

ContextMenuRadioItem

Props

Prop	Type	Default
valuerequired The unique value of the item.	AcceptableValue	-
disabled When true, prevents the user from interacting with the item.	boolean	-
textValue Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. <br> Use this when the content is complex, or you have non-textual content inside.	string	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Events

Event	Payload
select Event handler called when the user selects an item (via mouse or keyboard). <br> Calling event.preventDefault in this handler will prevent the menu from closing when selecting that item.	[event: Event]

Slots

Slot	Scope
default The content of the component.	-

ContextMenuShortcut

Slots

Slot	Scope
default The content of the component.	-

ContextMenuSeparator

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

ContextMenuLabel

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
inset Adds left padding to align with items that have an icon or indicator.	boolean	-

Slots

Slot	Scope
default The content of the component.	-

ContextMenuSub

Props

Prop	Type	Default
defaultOpen The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.	boolean	-
open The controlled open state of the menu. Can be used as v-model:open.	boolean	-

Events

Event	Payload
update:open Event handler called when the open state of the submenu changes.	[payload: boolean]

Slots

Slot	Scope
default The content of the component.	-

ContextMenuSubTrigger

Props

Prop	Type	Default
graceDuration How long (in milliseconds) the pointer is given to reach the submenu after leaving the trigger. While it moves towards the submenu within this time, hovering other items won't close the submenu. Increase it for users who move the pointer slowly or on devices under heavy load.	number	300
disabled When true, prevents the user from interacting with the item.	boolean	-
textValue Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. <br> Use this when the content is complex, or you have non-textual content inside.	string	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
inset Adds left padding to align with items that have an icon or indicator.	boolean	-

Slots

Slot	Scope
default The content of the component.	-

ContextMenuSubContent

Props

Prop	Type	Default
forceMount Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
loop When true, keyboard navigation will loop from last item to first, and vice versa.	boolean	false
reference The custom element or virtual element that will be set as the reference to position the floating element. If provided, it will replace the default anchor element.	ReferenceElement	-
memoDependencies Reactive dependencies that should invalidate the memoized content subtree.	unknown[]	-
sideOffset The distance in pixels from the trigger.	number	0
sideFlip Flip to the opposite side when colliding with boundary.	boolean	true
alignOffset An offset in pixels from the start or end alignment options.	number	0
alignFlip Flip alignment when colliding with boundary. May only occur when prioritizePosition is true.	boolean	true
avoidCollisions When true, overrides the side and align preferences to prevent collisions with boundary edges.	boolean	true
collisionBoundary The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.	Element | (Element | null)[] | null	[]
collisionPadding The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.	number | Partial<Record<"top" | "right" | "bottom" | "left", number>>	0
arrowPadding The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.	number	0
hideShiftedArrow When true, hides the arrow when it cannot be centered to the reference element.	boolean	true
sticky The sticky behavior on the align axis. partial will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.	"partial" | "always"	"partial"
hideWhenDetached Whether to hide the content when the trigger becomes fully occluded.	boolean	false
positionStrategy The type of CSS position property to use.	"absolute" | "fixed"	-
updatePositionStrategy Strategy to update the position of the floating element on every animation frame.	"always" | "optimized"	'optimized'
disableUpdateOnLayoutShift Whether to disable the update position for the content when the layout shifted.	boolean	false
prioritizePosition Force content to be position within the viewport. Might overlap the reference element, which may not be desired.	boolean	false

Events

Event	Payload
escapeKeyDown Event handler called when the escape key is down. Can be prevented.	[event: KeyboardEvent]
pointerDownOutside Event handler called when a pointerdown event happens outside of the DismissableLayer. Can be prevented.	[event: PointerDownOutsideEvent]
focusOutside Event handler called when the focus moves outside of the DismissableLayer. Can be prevented.	[event: FocusOutsideEvent]
interactOutside Event handler called when an interaction happens outside the DismissableLayer. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.	[event: PointerDownOutsideEvent | FocusOutsideEvent]
openAutoFocus	[event: Event]
closeAutoFocus Event handler called when auto-focusing on close. Can be prevented.	[event: Event]
entryFocus	[event: Event]

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Uses the roving focus pattern of the Menu WAI-ARIA design pattern. Reka UI manages focus and the menu / menuitem roles.

Key	Description
Space	Activates the focused item.
Enter	Activates the focused item.
ArrowDown	Moves focus to the next item.
ArrowUp	Moves focus to the previous item.
ArrowRight	When focus is on a submenu trigger, opens the submenu.
ArrowLeft	When focus is on an item of a submenu, closes the submenu and moves focus to its trigger.
Esc	Closes the context menu.