Context Menu

A menu of actions that opens at the pointer when the user right clicks an area. It is a Menu placed at the cursor, so it has the same items, submenus and keys.

General

Wrap the area and pass the items in content. The area has to be focusable to open the menu from the keyboard, so give it tabIndex={0}.

Files

Give each row its own menu, with a submenu for the less common actions, and tell what happened.

Disabled

With disabled, a right click opens the menu of the browser, as if there were no Context Menu.

APIs

ContextMenu.Props

Attribute	Description	Type	Accepted values	Default
content	the items of the menu	`ReactNode`	`Menu.Item`, `Menu.Sub`, `Menu.Divider`, ...	-
disabled	leave the right click to the browser	`boolean`	-	`false`
onVisibleChange	called with `true` when the menu opens and `false` when it closes	`(visible: boolean) => void`	-	-
...	native props, passed to the area `div`	`HTMLAttributes`	`'tabIndex', 'id', 'style', ...`	-

Behavior

• Position: the menu opens at the pointer and flips to the other side when there is no room.
• Another right click moves the menu to the new point.
• Closing: choosing an item, Escape, a click outside and a scroll of the page all close it. The focus goes back to the area.
• Items are the ones of Menu, with the same keys: arrows, Home, End, Enter, Space and the first letters.
• onContextMenu: a handler you pass to the area runs first, and calling preventDefault there keeps the menu closed.

The right click is not the only way in. The keyboard opens a context menu with Shift and F10, or with the menu key, on a focused element, and the browser sends the same event with the position of that element. For that, the area, or something inside it, has to be focusable: use tabIndex={0} on the area when it has nothing focusable. The menu is a menu with menuitem children, as in Menu. Touch screens have no right click, so keep a visible way to reach the same actions, like a button with a Menu.

Edit this page on GitHub