Context menu
The Menu anatomy opened at the pointer by a right click or long press.
import { ContextMenu, ContextMenuTrigger, ContextMenuContent } from "@arcadia/ui"Right-click a file
TSX
The trigger is a <div> around whatever owns the menu: a row, a list, a canvas. A right click or a long press opens the content at the pointer, at the lg size of an action menu (32px rows, inset separators).
Every Menu part works inside: items, groups, checks and submenus. See Menu for the item anatomy and its keys.
Context menus are hard to discover, and a keyboard or a screen reader has no reliable way to open one, so keep every action reachable another way, such as the row's "…" menu or a toolbar. Once open, focus moves into the menu and returns to the trigger on close.
- ↓↑
- Move the highlight
- EnterSpace
- Activate the highlighted row
- Esc
- Close and return focus
ContextMenu
open- boolean
- Controlled open state.
onOpenChange- (open: boolean, details: OpenChangeDetails) => void
- Called when the menu opens or closes, with why (
details.reason) and the event. onOpenChangeComplete- (open: boolean) => void
- Called once the open or close transition has finished.
render- RenderProp
- Render another element in place of the
div.
Rest props go to <div> props.
rootStyle- MenuStyle
- Typed StyleX override: where the menu sits (layout) and its
--menu-*knobs. side- "top" | "bottom" | "left" | "right" | "inline-start" | "inline-end"Default"bottom"
align- "start" | "center" | "end"Default"start"
sideOffset- numberDefault6
alignOffset- number
collisionPadding- number
size- "md" | "lg"Default"lg"
mdpickers,lgaction and context menus.aria-label- string
- The menu's name where its trigger doesn't give one: a context menu ("Chat actions"; default "Context menu"), or with
search, what the list under the field holds ("Models", "Projects"). width- "auto" | "trigger" | number
auto(content, 180–320),trigger(exactly the trigger's width) or a pixel width.search- ReactNode
- A
<MenuSearch/>row, rendered above the scroller so it never scrolls away. instant- boolean
- Skip the open/close transition (re-anchoring from one picker to the next).
finalFocus- FocusTarget
- Where focus goes on close. Default: the trigger.
className- string
- A product's hook class for its own rules (being retired: new code sets
rootStyle).
Rest props go to <div> props.