Context Menu
@sushindustries/uiOne menu, reachable by right-click, by long press, and by a button that is always there.
tanstacktanstack add https://adamjurek.com/r/tanstack/context-menu.json
shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/context-menu.jsonThree doors to the same room
Right-click is the interaction people ask for and the one fewest people can perform. A menu that is only reachable that way does not exist on a phone, does not exist for anyone navigating by keyboard, and does not exist for someone on a trackpad who has never found secondary click.
| Door | Who uses it |
|---|---|
| Right-click | pointer, and it is what people expect of an icon |
| Long press, 450ms | touch and pen. pointerType is checked, because a held mouse button is a drag, not a long press |
| A visible button | everyone else, including every keyboard user |
The button is the important one, and it is always visible rather than revealed on hover. A control that only exists while a pointer is over it does not exist on a touch screen at all.
The long press cancels on movement
A press that turns into a drag is a scroll. Without the cancel, a menu opens in the face of anyone who scrolls the page with their thumb on a folder.
Install
tanstack add https://adamjurek.com/r/tanstack/context-menu.jsonshell
pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/context-menu.jsonshell
pnpm add @sushindustries/ui @sushindustries/atomsshell
What you get
| Version | 0.1.0 |
| Category | layout · Overlays |
| Files | context-menu.tsx, icon.tsx |
| Dependencies | react-dom@^19.0.0 |
| Tags | block, menu, touch, keyboard, no-deps |