Context Menu

A menu that appears at the pointer on right click or long press.

Installation


pnpm dlx shadcn@latest add @lumi-ui/context-menu

Anatomy

<ContextMenu>
  <ContextMenuTrigger />
  <ContextMenuContent>
    <ContextMenuItem />
    <ContextMenuLinkItem />
    <ContextMenuItem>
      <ContextMenuShortcut />
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuGroup>
      <ContextMenuLabel />
    </ContextMenuGroup>
    <ContextMenuRadioGroup>
      <ContextMenuRadioItemContent />
    </ContextMenuRadioGroup>
    <ContextMenuCheckboxItemContent />
    <ContextMenuSub>
      <ContextMenuSubTriggerGroup />
      <ContextMenuSubContent>
        {/* Submenu items */}
      </ContextMenuSubContent>
    </ContextMenuSub>
  </ContextMenuContent>
</ContextMenu>

Basic Usage

Features

Composite Ergonomics

Primitive Control

Item Variants

API Reference

ContextMenuContent

A high-level container component that combines ContextMenuPortal, ContextMenuPositioner, and ContextMenuPopup into a single styled content element.

Prop	Type	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	The preferred side of the anchor to render against when open.
`sideOffset`	`number`	The distance in pixels from the anchor.
`align`	`"start" \| "center" \| "end"`	The preferred alignment against the anchor.
`alignOffset`	`number`	An offset in pixels from the `"start"` or `"end"` alignment options.
`showArrow`	`boolean`	Whether to render the arrow element.
`matchAnchorWidth`	`boolean`	Whether the popup width should match the anchor width.
`className`	`string`	Additional CSS classes.
`...props`	`BaseContextMenu.Popup.Props`	Passes all other props to the underlying popup component.

ContextMenuCheckboxItemContent

A high-level checkbox item component that combines ContextMenuCheckboxItem and CheckboxItemIndicator into a single styled element with configurable indicator placement.

Prop	Type	Description
`indicatorPlacement`	`"start" \| "end"`	The position of the indicator icon relative to the content.
`indicatorIcon`	`React.ReactNode`	The icon to render as the checked indicator.
`className`	`string`	Additional CSS classes.
`...props`	`BaseContextMenu.CheckboxItem.Props`	Passes all other props to the underlying checkbox item component.

ContextMenuRadioItemContent

A high-level radio item component that combines ContextMenuRadioItem and RadioItemIndicator into a single styled element with configurable indicator placement.

Prop	Type	Description
`indicatorPlacement`	`"start" \| "end"`	The position of the indicator icon relative to the content.
`indicatorIcon`	`React.ReactNode`	The icon to render as the selected indicator.
`className`	`string`	Additional CSS classes.
`...props`	`BaseContextMenu.RadioItem.Props`	Passes all other props to the underlying radio item component.

ContextMenuSubTriggerGroup

A composite submenu trigger component that renders trigger content and a chevron icon while reusing context menu item variants.

Prop	Type	Description
`variant`	`"default" \| "destructive" \| "inset"`	The visual style variant applied to the trigger row.
`unstyled`	`boolean`	Disables built-in trigger styling when `true`.
`className`	`string`	Additional CSS classes.
`children`	`React.ReactNode`	The content of the trigger.
`...props`	`BaseContextMenu.SubmenuTrigger.Props`	Passes all other props to the underlying submenu trigger component.

ContextMenuSubContent

A composite content component for submenus.

Prop	Type	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	The preferred side of the anchor to render against when open.
`sideOffset`	`number`	The distance in pixels from the anchor.
`align`	`"start" \| "center" \| "end"`	The preferred alignment against the anchor.
`alignOffset`	`number`	An offset in pixels from the `"start"` or `"end"` alignment options.
`className`	`string`	Additional CSS classes.
`...props`	`ContextMenuContentProps`	Passes all other props to the underlying `ContextMenuContent` component.