Context Menu

Actions for an area, opened with a right-click on desktop and a long-press on touch screens.

Stable

Web

iOS

Android

@advui/core

Source

Browser-style menu

Preview

Code

Right-click here (long-press on touch)

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { ContextMenu } from '@advui/core'

<ContextMenu>
  <ContextMenu.Trigger>
    <FileRow file={file} />
  </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item onSelect={rename}>Rename</ContextMenu.Item>
    <ContextMenu.Separator />
    <ContextMenu.Item destructive onSelect={remove}>Delete</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu>

Examples

Rows in a list

Each row has its own menu.

Preview

Code

Quarterly report.pdf2.4 MB

Brand guidelines.pdf8.1 MB

Invoice 0042.pdf120 KB

API reference

ContextMenu

Prop	Type	Default	Description
`onOpenChange`	`(open: boolean) => void`	—	Called when the menu opens or closes.

ContextMenu.Trigger

Takes View props to size and style the area.

Prop	Type	Default	Description
`children` required	`ReactNode`	—	The area that opens the menu: a card, a row, a canvas…
`disabled`	`boolean`	—	Ignore right-click and long-press.

ContextMenu.Content

Prop	Type	Default	Description
`minWidth`	`'40' \| '48' \| '56' \| '64'`	`'48'`	Minimum menu width.Web only.

ContextMenu.Item

The same parts and props as Dropdown Menu.

Prop	Type	Default	Description
`onSelect`	`() => void`	—	Called when chosen; the menu closes.
`icon`	`ReactNode`	—	Leading icon.
`shortcut`	`string`	—	Keyboard hint on the right.Web only.
`destructive`	`boolean`	—	Style as a dangerous action.
`disabled`	`boolean`	—	Skip this item.

ContextMenu.CheckboxItem

Prop	Type	Default	Description
`checked`	`boolean`	—	Checked state.
`onCheckedChange`	`(checked: boolean) => void`	—	Called with the new state.

ContextMenu.RadioGroup

Prop	Type	Default	Description
`value`	`string`	—	Selected item.
`onValueChange`	`(value: string) => void`	—	Called with the chosen value.

ContextMenu.RadioItem

Prop	Type	Default	Description
`value` required	`string`	—	Item value.

ContextMenu.Label

A heading for the items after it.

ContextMenu.Separator

A line between groups of items.

ContextMenu.Group

Groups items under a Label for screen readers.

Accessibility

Context menus are hidden until someone thinks to look for them: offer the same actions somewhere visible too (a Dropdown Menu on the row, a toolbar).
Once open, the menu follows the WAI-ARIA menu pattern, like Dropdown Menu: menuitem, menuitemcheckbox and menuitemradio with aria-checked; focus moves into the menu and back afterwards.
Keyboard users open it with Shift+F10 or the Menu key while focus is inside the area.
On iOS and Android the area is one accessible element with a "long press" action (listed by VoiceOver and TalkBack) and the hint "Long press for options".

Keyboard interactions
Key	Action
`Shift+F10 / Menu`	Opens the menu from focus inside the area.
`↓ / ↑`	Moves between items (disabled items are skipped).
`Enter / Space`	Chooses the focused item.
`A–Z`	Type-ahead to an item.
`Esc`	Closes the menu.

Responsive behavior

The menu opens at the pointer and flips to stay inside the viewport.

Platform notes

Web

Opens at the pointer on right-click, and after a long-press on touch screens.

iOS

A long-press opens Dropdown Menu’s bottom sheet (native menus need a native module that Expo Go does not include). Shortcut hints are hidden.