Context Menu
A right-click context menu with keyboard navigation.
context-menu-demo.app
Installation
terminal.sh
npx y2kui@latest add context-menuUsage
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "@/components/ui/context-menu"
<ContextMenu>
<ContextMenuTrigger asChild>
<div className="target">Right-click here</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>Action</ContextMenuItem>
<ContextMenuItem>Another action</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>Sub-components
| Component | Description |
|---|---|
<ContextMenuTrigger /> | The element that triggers the context menu on right-click. |
<ContextMenuContent /> | The popup menu panel. |
<ContextMenuItem /> | A clickable menu item. |
<ContextMenuCheckboxItem /> | A menu item with a checkbox state. |
<ContextMenuRadioItem /> | A menu item with a radio state. |
<ContextMenuSubTrigger /> | A trigger that opens a sub-menu. |
<ContextMenuSubContent /> | Content for a sub-menu. |
<ContextMenuSeparator /> | A visual separator. |
<ContextMenuLabel /> | A non-interactive label. |
<ContextMenuShortcut /> | Displays a keyboard shortcut hint. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Merges the trigger into its child element. |
disabled | boolean | false | Disables the menu item. |
inset | boolean | false | Adds left padding for icon alignment. |