Context Menu
Right-click or long-press anywhere in an area to open a menu at the pointer, with shortcuts and a submenu.
context-menu.tsxcontext-menu.css
Checking access…
Overview
The menu opens exactly where you clicked and flips to stay inside its container. Items show their shortcuts; one opens a submenu to the side on hover or arrow-right.
On touch, a 450 ms long-press opens it. Escape or clicking outside closes it and returns focus.
When to use
- File managers, canvases, tables, editors.
When not to use
- Primary actions: never hide them only in a context menu.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/context-menu.json$
npx shadcn@latest add https://sundaeui.dev/r/context-menu.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/context-menu.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/context-menu.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy context-menu.tsx and context-menu.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { ContextMenu } from '@/components/sundae/context-menu'
<ContextMenu />Props
| Prop | Type | Default |
|---|---|---|
items*Items: label, shortcut, danger, children. | MenuItem[] | — |
onSelectCalled with the chosen item id. | (id: string) => void | — |
children*The area that listens for the context menu. | ReactNode | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- role="menu" / "menuitem" with aria-haspopup on the submenu item; arrow keys move, → opens the submenu, ← closes it.
- Shift+F10 and the ContextMenu key open it from the keyboard.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-ctx; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- Shift + F10
- Open from keyboard
- ↑ / ↓
- Move
- → / ←
- Open / close submenu
- Esc
- Close
FAQ
- Is Context Menu free?
- Context Menu is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Context Menu?
- Run npx shadcn@latest add https://sundaeui.dev/r/context-menu.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Context Menu support keyboard and screen readers?
- role="menu" / "menuitem" with aria-haspopup on the submenu item; arrow keys move, → opens the submenu, ← closes it. Shift+F10 and the ContextMenu key open it from the keyboard.
- Does Context Menu respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All components →Snooze Menu
Components · RefinedSplit Button
Components · RefinedSpeed Dial
Components · RefinedToast Stack
Components · Refined- Pro
Sheet Drawer
Components · Refined Avatar Stack
Components · Refined