Context Menu Blueprint
Static open-state context menu over a document row with grouped actions, keyboard hints, a submenu arrow on Move to, and Delete in muted weight.
Static open-state context menu over a document row with grouped actions, keyboard hints, a submenu arrow on Move to, and Delete in muted weight.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Context Menu Blueprint is a static open-state rendering of a right-click menu over a document row. The trigger item Q2 Growth Report.md is shown selected in a list of three rows, and the menu card floats inline to its right. Primary actions (Open with Enter, Rename with F2, Duplicate with Cmd D, Move to with a submenu chevron) sit above a divider, and Delete with the backspace hint renders in muted weight below it. Keyboard hints use the Kbd and KbdGroup primitives.
Primary and danger actions are separate typed arrays so the divider always lands between them and the muted class only touches the danger group. This is a static blueprint rendered as plain markup; no Radix DropdownMenu is used so the menu cannot escape the preview root.
Reach for this block as the design reference or screenshot surface for a context menu. Wire the real interaction with a Radix DropdownMenu anchored to an onContextMenu handler in your live application.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the file or document row context menu. Other context menu blueprints:
Tip: Delete belongs in a separate visual group with lower text weight, not a destructive color; the separator and the muted tone carry the warning without alarming every user who scans the list.