Skip to content
TrademarkTrademark
Docs
Components

ContextMenu

Updated: October 11, 2026
View on GitHub

A component for providing users with contextual options / information on right click.

Keyboard and screen readers

The menu opens at the pointer, or at the element when it is opened from the keyboard (Shift+F10 or the Menu key). Near the right or bottom edge of the screen it opens to the left of or above the pointer, so it stays on screen. It is a menu and its Options are menuitems: the arrow keys move between them, skipping disabled ones and wrapping at the ends, Home and End jump to the first and last, and Escape closes it and returns focus to where it was.

Without a wrapper box

ContextMenu wraps its children in a box. Set contents to render the wrapper with display: contents instead, so it adds nothing to the layout: an absolutely positioned child still positions against its own ancestors, and a grid or flex item stays one. A timeline clip or a table row can take a context menu this way without a hand-made one. With contents there is no box for className, style or the disabled dimming to style.

API reference

Type
Default
children
React.ReactNode—
dropdownrequired
The menu itself.
ReactNode—
placement
Where the menu opens relative to the pointer; it flips at the screen edges.
toprightbottomlefttop-starttop-endright-startright-endbottom-startbottom-endleft-startleft-end
bottom-start
fillWidth
Stretch the region that opens the menu to the width of its container.
booleanfalse
minWidth
Lower bound on the menu's width, in rem.
number12
maxWidth
Upper bound on the menu's width, in rem.
number—
minHeight
Lower bound on the menu's height, in rem.
number—
style
React.CSSProperties—
className
string—
onSelect
Called with the value of the Option that was picked.
(value: string) => void—
closeAfterClick
Close on selection.
booleantrue
open
Controlled open state.
boolean—
onOpenChange
Called whenever it opens or closes.
(open: boolean) => void—
selectedOption
Value of the Option to mark as current.
string—
disabled
Stop the menu opening at all.
booleanfalse
contents
Render no wrapper box (display: contents), so the children keep their own layout.
booleanfalse
…and every FlexProps propinherited—
Edit this page on GitHub