Skip to content

Context Menu

Actions

Reveals contextual actions for a target through a context-menu interaction.

React · copy into your project · light and dark themes

Try it

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/context-menu.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes card, typography. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/context-menu.json https://luv-jeri.github.io/cojeev-ui/r/card.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using context menu

Items show stable, varied blob adornments by default. Set adornment={false} to hide, supply {shape,color,icon,effect}, or pass a custom icon element.
Wrap the relevant target with ContextMenuTrigger and compose actions in ContextMenuContent.
Use checkbox, radio, or submenu items when the actions include stateful choices or another level.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

ContextMenuProps

Accepts the native or primitive props declared by its exported TypeScript type.

ContextMenuPortalProps

Accepts the native or primitive props declared by its exported TypeScript type.

ContextMenuGroupProps

Accepts the native or primitive props declared by its exported TypeScript type.

ContextMenuRadioGroupProps

Accepts the native or primitive props declared by its exported TypeScript type.

ContextMenuSubProps

Accepts the native or primitive props declared by its exported TypeScript type.

ContextMenuTriggerProps

Accepts the native or primitive props declared by its exported TypeScript type.

ContextMenuContentProps

Accepts the native or primitive props declared by its exported TypeScript type.

ContextMenuSubContentProps

Accepts the native or primitive props declared by its exported TypeScript type.

ContextMenuItemProps

Prop	Type	Required
`variant`	`"default" \| "danger"`	No
`inset`	`boolean`	No

ContextMenuSubTriggerProps

Prop	Type	Required
`inset`	`boolean`	No

ContextMenuCheckboxItemProps

Accepts the native or primitive props declared by its exported TypeScript type.

ContextMenuRadioItemProps

Accepts the native or primitive props declared by its exported TypeScript type.

ContextMenuLabelProps

Accepts the native or primitive props declared by its exported TypeScript type.

ContextMenuSeparatorProps

Accepts the native or primitive props declared by its exported TypeScript type.

ContextMenuShortcutProps

Accepts the native or primitive props declared by its exported TypeScript type.

Accessibility

Keep essential actions reachable through a visible control as well as the contextual menu.
Use the supplied menu items to retain keyboard navigation and state announcements.

States and appearance

openresthoverfocusactive

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.