Context Menu
The same menu, on a right-click.
Default
Right-click the area. The menu key on a keyboard does the same.
Right-click here
It opens where the pointer is rather than against a button, and it flips when the window edge is too close. Everything else — items, ticks, submenus, the keyboard — is shared with the dropdown menu.
Installation
npx philcn@latest add context-menuThe file is written into your project. It is yours from then on — change it as you like.
Props
| Prop | Type | What it does |
|---|---|---|
| ContextMenu.open | boolean | Controlled: whether the menu is showing. |
| ContextMenuContent.loop | boolean | Whether the last item wraps round to the first. |
| ContextMenuItem.variant | "default" | "destructive" | Destructive paints the item red. |
| ContextMenuTrigger.asChild | boolean | Makes your own element the area that answers the right-click. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.
Worth knowing
- Never put something in here that is nowhere else: a right-click is not available to everyone, and it is invisible to a reader who does not try it.