A right-click and long-press menu that opens at the pointer and flips at the edges. It has icons, shortcuts, a submenu, a danger item and full keyboard control.
Right-click a file for actions
npx shadcn@latest add https://hyperblur.dev/r/menu-context.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-context.tsx.
import { MenuContext } from "@/components/hyperblur/menu-context"
<MenuContext onSelect={(id) => console.log(id)}><div>Right-click me</div></MenuContext>| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label?: string; icon?: ReactNode | IconName; shortcut?: string; danger?: boolean; disabled?: boolean; separator?: boolean; items?: ContextMenuItem[] }[] | Menu entries. Built-in icon names are open, copy, cut, paste, edit, share, trash, star, link, folder, download, mail and chat. An entry with `items` opens a submenu. | |
| onSelect | (id: string) => void | Called with the id of the chosen entry. | |
| boundary | "viewport" | "container" | "viewport" | Where the menu is placed and kept inside. Viewport uses a portal and fixed position. Container renders inside the component and flips against its box. |
| longPress | number | 520 | Milliseconds of touch press that open the menu. 0 turns long press off. |
| autoDemo | number | 0 | Milliseconds between automatic demo openings while the pointer is away. Only works with boundary container. |
| disabled | boolean | false | Turn the menu off. |
| accent | string | "#2f7bff" | Highlight color of the active entry. |
| children | ReactNode | The area that responds to right-click. A dashed hint box is shown when omitted. |