Context menu | Arcadia Design

Right-click a file

import {
  ContextMenu, ContextMenuContent, ContextMenuTrigger, ListRow, MenuItem,
  MenuSeparator,
} from "@arcadia/ui";

<ContextMenu>
  <ContextMenuTrigger {...sx("cmp-rows", cmp.rows)}>
    <ListRow leading="file-code" label="dialog.tsx" description="src/settings" />
    <ListRow leading="file-code" label="settings.css" description="src/settings" />
    <ListRow leading="file-text" label="README.md" />
  </ContextMenuTrigger>
  <ContextMenuContent>
    <MenuItem icon="external" shortcut="mod+o">Open</MenuItem>
    <MenuItem icon="copy">Copy path</MenuItem>
    <MenuItem icon="pencil" shortcut="F2">Rename</MenuItem>
    <MenuSeparator />
    <MenuItem icon="trash" tone="danger" shortcut="⇧⌘⌫">Delete</MenuItem>
  </ContextMenuContent>
</ContextMenu>

TSX

import {
  ContextMenu, ContextMenuContent, ContextMenuTrigger, ListRow, MenuItem,
} from "@arcadia/ui";

<ContextMenu>
  <ContextMenuTrigger>
    <ListRow leading="file-code" label="dialog.tsx" />
  </ContextMenuTrigger>
  <ContextMenuContent>
    <MenuItem icon="pencil">Rename</MenuItem>
    <MenuItem icon="trash" tone="danger">Delete</MenuItem>
  </ContextMenuContent>
</ContextMenu>

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 More 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.
disabled: boolean; The browser's own menu here; turning it on later remounts nothing inside.

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: numberDefault 6
alignOffset: number
collisionPadding: number
size: "md" | "lg"Default "lg"; md pickers, lg action 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.
footer: ReactNode; A band under the rows, never scrolled.
container: PortalContainerDefault document.body; Portal container.
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.

Usage

Accessibility

API reference

ContextMenu

ContextMenuTrigger 2 props

ContextMenuContent 15 props