Special/ContextMenu

ContextMenu

Right-click context menu with submenus, keyboard shortcuts display, danger styles, separators, and viewport clamping. Closes on Escape, outside click, or item selection.

import { ContextMenu } from "@animui/ui"

Basic

Right-click in the demo area — the menu appears at cursor position, clamped to the viewport.

Right-click anywhere in this area

Submenus

Pass an items array on any item to create a submenu. The submenu opens on hover with a 150ms delay before closing — smooth enough to reach diagonal positions without it disappearing.

ContextMenuItem props

Prop	Type	Default	Description
`id`	`string`	—	Unique identifier.
`label`	`string`	—	Display text.
`icon`	`ReactNode`	—	Icon shown at the left.
`shortcut`	`string`	—	Keyboard shortcut shown at the right.
`disabled`	`boolean`	`false`	Grays out the item and prevents selection.
`danger`	`boolean`	`false`	Renders the item in red.
`separator`	`boolean`	`false`	Renders a horizontal divider instead of an item.
`items`	`ContextMenuItem[]`	—	Nested items — renders a submenu on hover.
`onSelect`	`() => void`	—	Called when the item is clicked.

ContextMenu props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The element(s) that the context menu is attached to.
`items`	`ContextMenuItem[]`	—	Menu items to display.
`className`	`string`	—	Applied to the children wrapper div.