Context Menu

The actions for something, opened where it is right-clicked (or with the Menu key or Shift+F10).

The snippet an agent gets

import { ContextMenu, MenuItem } from '@basiiik/ui';<ContextMenu trigger={<div tabIndex={0}>report.pdf</div>}><MenuItem>Rename</MenuItem></ContextMenu>

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it ships.

Example values were filled in for the required prop trigger: replace them with your own.
Open follows a right-click, the Menu key or Shift+F10 on the area; item states are MenuItem's (focus follows hover).
Compose with: menu-item.
Storybook: Overlays/Context menu.

Install

npm install @basiiik/uiimport { ContextMenu } from '@basiiik/ui';

Props

Prop	Type	Default
`size`	`"sm" \| "md"`	`"md"`
`trigger`	`ReactElement<TriggerProps, string \| React.JSXElementConstructor<any>>`	`Required`
`children`	`ReactNode`	`Required`
`aria-label`	`string`	`–`
`onOpenChange`	`(open: boolean) => void`	`–`

Other props

Prop	What it does
`className` `string`

States. Open follows a right-click, the Menu key or Shift+F10 on the area; item states are MenuItem's (focus follows hover).

Accessibility

The Menu key or Shift+F10 on the focused area opens it
Up, Down, Home, End and type-ahead move between items
Enter or Space chooses an item and closes
Escape closes and returns focus to the area
Tab closes
The menu is named by aria-label (default "Actions") because it has no visible title
The area gets aria-haspopup="menu"
Items are menuitem (menuitemcheckbox when checkable); disabled ones are skipped

Use it when

Actions on an item people work with a lot: a file, a row, a card, a message
Power users who expect right-click, alongside a visible More button

Do not use it when

The only way to reach an action (also show a More button or a toolbar)
A menu opened from a button (use Dropdown Menu)
Text fields (people expect the browser's copy and paste menu)

Rules for agents

Pass the area as trigger and give it tabIndex={0} so keyboards can open the menu with Shift+F10
Put the same actions in a visible More button (a DropdownMenu) as well
Use MenuItem and MenuSeparator as children, with destructive items last
Give aria-label when "Actions" does not describe the menu ("File actions")

Avoid

Right-click as the only way to an action
A Context Menu on a text input or on the whole page
Different actions in the Context Menu and the More button for the same item

Colour tokens it reads

color.bg.subtlecolor.bg.surfacecolor.border.subtlecolor.icon.disabledcolor.icon.secondarycolor.text.brandcolor.text.dangercolor.text.disabledcolor.text.primarycolor.text.tertiary

2 Figma variantsTry it in the live demo