Context menu
Also called right-click menu or shortcut menu
A menu of actions for one item that opens at the pointer when you right-click it, or long-press it on a touch screen.
import { ContextMenu } from '@base-ui/react/context-menu';
const FILES = ['Q3 report.pdf', 'Brand guidelines.fig', 'Launch plan.docx'];
const ACTIONS = ['Open', 'Rename', 'Duplicate'];
const item =
'cursor-default rounded-lg px-3 py-2 text-sm outline-none select-none data-highlighted:bg-muted';
// A shortcut, not the only path: offer the same actions from a visible ⋯ button too.
export function FileList({
onAction
}: {
onAction: (action: string, file: string) => void;
}) {
return (
<ul className='w-80 divide-y rounded-xl border'>
{FILES.map((file) => (
<ContextMenu.Root key={file}>
{/* Opens at the pointer on right-click, or after a long press on touch. */}
<ContextMenu.Trigger
render={<li />}
className='px-4 py-3 text-sm select-none data-popup-open:bg-blue-500/10'
>
{file}
</ContextMenu.Trigger>
<ContextMenu.Portal>
{/* The positioner shifts the menu to keep it inside the viewport. */}
<ContextMenu.Positioner>
<ContextMenu.Popup className='min-w-44 rounded-xl border bg-background p-1 shadow-lg outline-none transition-opacity duration-100 data-ending-style:opacity-0'>
{ACTIONS.map((action) => (
<ContextMenu.Item
key={action}
className={item}
onClick={() => onAction(action, file)}
>
{action}
</ContextMenu.Item>
))}
<ContextMenu.Separator className='my-1 h-px bg-border' />
<ContextMenu.Item
className={`${item} text-red-600 data-highlighted:bg-red-500/10`}
onClick={() => onAction('Delete', file)}
>
Delete
</ContextMenu.Item>
</ContextMenu.Popup>
</ContextMenu.Positioner>
</ContextMenu.Portal>
</ContextMenu.Root>
))}
</ul>
);
}Add a right-click menu to each file row with Open, Rename, Duplicate, a separator, and a red Delete. Open it at the pointer, shift it so it stays inside the viewport, highlight the row while the menu is open, and support arrow keys, Enter, and Escape. On touch devices, open it after a 500ms long press, and offer the same actions from a ⋯ button on each row.
Paste into Layerwise or any AI coding tool.
What is Context menu?
A context menu appears exactly where you right-click and lists actions for the thing under the pointer: open, rename, duplicate, or delete a file. Because the actions match what you clicked, it is a fast shortcut for people who already know where to look.
It belongs in apps people spend a lot of time in, like file browsers, editors, and design tools. Treat it as a shortcut and keep every action in it reachable from a visible button or menu as well, since many people never think to right-click and touch screens need a long press.
Open it instantly at the pointer, shift it so it stays on screen near the edges, highlight the item it belongs to, and close it on Escape or a click elsewhere. Calling preventDefault() in the contextmenu event replaces the browser's own menu, so do that only on elements that offer their own.
Often confused with
- Dropdown menu
- A dropdown menu opens from a visible button. A context menu is hidden until you right-click or long-press, and it opens at the pointer.
Related terms
All termsDropdown menu
A list of actions that drops down from a button when you click it, then closes as soon as you pick one.
Command palette
A search box that opens with a shortcut like ⌘K and lets you find and run any command or page by typing a few letters.
Keyboard shortcut
A key combination that runs an action directly, like ⌘S to save or ⌘K to open search, so frequent users can skip the mouse.
Affordance
The visual cues that tell people what they can do with an element, like a raised button that looks pressable or a grip that says "drag me".
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.