Context Menu
NewPro
A right-click and long-press menu with submenus, smart edge positioning and full keyboard control.
Customize
Icons
Shortcuts
450ms
#ff784f
When to use it
- File browsers and asset libraries with per-item actions
- Canvases and editors where the menu depends on what was clicked
- Tables with row actions on desktop and on touch screens
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 683
Installation
Context Menu is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy context-menu.tsx into components/ui and run npm install motion.
Usage
import { ContextMenu } from "@/components/ui/context-menu";
<ContextMenu
items={[
{ label: "Rename", shortcut: "⌘R", onSelect: rename },
{ label: "Share", items: [{ label: "Copy link", onSelect: copyLink }] },
{ type: "separator" },
{ label: "Delete", danger: true, onSelect: remove },
]}
>
<FileTile />
</ContextMenu>Props
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | ContextMenuEntry[] | (context) => ContextMenuEntry[] | — | Entries: actions with { label, icon?, shortcut?, danger?, disabled?, onSelect?, items? }, checkboxes, labels and separators. A function receives { target }, the element that was clicked. |
| children | ReactNode | — | The area that answers to right-click and long-press. |
| longPressDelay | number | 450 | Milliseconds a touch has to hold before the menu opens. |
| disabled | boolean | false | Leaves the browser's own menu in place. |
| color | string | "#ff784f" | Color of the highlight. |
| focusable | boolean | true | Let the area take keyboard focus, so the menu key and Shift+F10 can open it. |
| onOpenChange | (open: boolean, target: Element | null) => void | — | Called when the menu opens or closes. On open it also receives the element that was clicked. |
| label | string | "Context menu" | Accessible name of the menu. |
| ref | Ref<ContextMenuHandle> | — | Gives you openAt(x, y, options?) and close(), for a more button or similar. |
| className | string | — | Extra classes for the area. |
| menuClassName | string | — | Extra classes for each menu panel. |
Dependencies: motion