Context Menus
A context menu is a panel of actions that belongs to the object you opened it on (a table row, a chat message, a node on a canvas) and appears where that object is rather than in the page chrome. Everything in it acts on that one thing, which is what lets the labels stay short: the subject is already established by where the menu opened. Separators group the items by consequence, and the destructive one sits alone at the bottom.
The part that catches teams out is discovery. A right-click is invisible, a long-press is invisible and slow, and neither exists for someone driving the app from the keyboard. So a context menu should hold a second copy of actions that live somewhere else too, not the only copy. Where a row carries an action people need often, give the row a visible trigger that opens the same menu, and let the items print their shortcut hints, so the menu teaches the faster route it is standing in for.
Add elements
Best for
Flow builders, block/node pickers, command panels
Anatomy
Search and filter · General/Integrations tabs · category rows with a nested Nodes submenu · an AI recommendations footer
Profile menu
Best for
User rows, team directories, avatar-triggered actions
Anatomy
Avatar and name trigger · quick-action icon row · Set status/Move/Edit/Share list · a destructive Delete footer
Message menu
Best for
Chat threads, comment reactions, inline message actions
Anatomy
A message bubble trigger · an emoji-reaction row · Reply/Copy/Report rows with keyboard-shortcut hints
Using Context Menus
Reach for it when
- A table or directory row needs per-record actions that would crowd the row if drawn inline
- A canvas or flow builder where a click should offer what can be added at that point
- A chat message needs reactions and replies without a permanent toolbar on every bubble
- A destructive action needs to sit apart from the ordinary ones, below a separator
Reach for something else when
- The action is the main thing to do on the screen: put a button on the page, where a gesture nobody was told about cannot hide it
- You are choosing a value rather than firing an action: a dropdown reports the choice back to the control that opened it
- The panel would need its own search across hundreds of entries. That is a command menu, which is built to be typed at
Where it shows up
Record row actions
A directory or file list gives every row the same set of operations. Opening them from the row keeps the table clear of buttons, and the menu's subject is whichever row was clicked, so labels can stay one word long.
Canvas node pickers
A flow builder opens a panel of what can be added at this point, with a search field, tabs across categories and a submenu for nested types. The menu is the palette here, so it earns a footer of suggestions.
Message actions
A chat bubble opens a row of reactions and the actions belonging to that message (reply, copy, report) each printing its keyboard shortcut, so the menu teaches the faster path while it does the slower one.
Team member rows
An avatar row in a team directory opens status, move, edit and share, with delete kept below a separator, far from the item above it and drawn so it does not read as a peer.
Questions
What is the difference between a context menu and a dropdown menu?
A context menu is opened by acting on an object (a right-click, a long-press, or a trailing button on a row) and every item in it acts on that object. A dropdown hangs off a control that is always visible, and it usually reports a chosen value back to that control. Context menus act; dropdowns mostly select.
How do you make a context menu work on touch and with a keyboard?
Touch has no right-click, so give each row a visible trigger, usually an ellipsis button, that opens the same menu. For the keyboard, the trigger must be focusable, Enter or the context-menu key should open the panel, arrow keys should move between items, typing a letter should jump to it, and Escape should close the menu and return focus to the trigger.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPContext Menus
A context menu is a panel of actions that belongs to the object you opened it on (a table row, a chat message, a node on a canvas) and appears where that object is rather than in the page chrome. Everything in it acts on that one thing, which is what lets the labels stay short: the subject is already established by where the menu opened. Separators group the items by consequence, and the destructive one sits alone at the bottom.
The part that catches teams out is discovery. A right-click is invisible, a long-press is invisible and slow, and neither exists for someone driving the app from the keyboard. So a context menu should hold a second copy of actions that live somewhere else too, not the only copy. Where a row carries an action people need often, give the row a visible trigger that opens the same menu, and let the items print their shortcut hints, so the menu teaches the faster route it is standing in for.
Add elements
Best for
Flow builders, block/node pickers, command panels
Anatomy
Search and filter · General/Integrations tabs · category rows with a nested Nodes submenu · an AI recommendations footer
Profile menu
Best for
User rows, team directories, avatar-triggered actions
Anatomy
Avatar and name trigger · quick-action icon row · Set status/Move/Edit/Share list · a destructive Delete footer
Message menu
Best for
Chat threads, comment reactions, inline message actions
Anatomy
A message bubble trigger · an emoji-reaction row · Reply/Copy/Report rows with keyboard-shortcut hints
Using Context Menus
Reach for it when
- A table or directory row needs per-record actions that would crowd the row if drawn inline
- A canvas or flow builder where a click should offer what can be added at that point
- A chat message needs reactions and replies without a permanent toolbar on every bubble
- A destructive action needs to sit apart from the ordinary ones, below a separator
Reach for something else when
- The action is the main thing to do on the screen: put a button on the page, where a gesture nobody was told about cannot hide it
- You are choosing a value rather than firing an action: a dropdown reports the choice back to the control that opened it
- The panel would need its own search across hundreds of entries. That is a command menu, which is built to be typed at
Where it shows up
Record row actions
A directory or file list gives every row the same set of operations. Opening them from the row keeps the table clear of buttons, and the menu's subject is whichever row was clicked, so labels can stay one word long.
Canvas node pickers
A flow builder opens a panel of what can be added at this point, with a search field, tabs across categories and a submenu for nested types. The menu is the palette here, so it earns a footer of suggestions.
Message actions
A chat bubble opens a row of reactions and the actions belonging to that message (reply, copy, report) each printing its keyboard shortcut, so the menu teaches the faster path while it does the slower one.
Team member rows
An avatar row in a team directory opens status, move, edit and share, with delete kept below a separator, far from the item above it and drawn so it does not read as a peer.
Questions
What is the difference between a context menu and a dropdown menu?
A context menu is opened by acting on an object (a right-click, a long-press, or a trailing button on a row) and every item in it acts on that object. A dropdown hangs off a control that is always visible, and it usually reports a chosen value back to that control. Context menus act; dropdowns mostly select.
How do you make a context menu work on touch and with a keyboard?
Touch has no right-click, so give each row a visible trigger, usually an ellipsis button, that opens the same menu. For the keyboard, the trigger must be focusable, Enter or the context-menu key should open the panel, arrow keys should move between items, typing a letter should jump to it, and Escape should close the menu and return focus to the trigger.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
