Components
Context Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Right click here
Installation
pnpm dlx shadcn@latest add https://basecn.dev/r/context-menu.jsonMigrating from Radix UI
Common Migration Steps
All components share several migration patterns when moving from Radix UI to Base UI. Before proceeding with component-specific changes, review the essential migration patterns.
Familiarizing yourself with these patterns will make the component-specific migration steps much clearer.
Listening to Item Clicks
In Radix UI, you can listen to item clicks by passing a function to the onSelect prop.
<ContextMenu>
<ContextMenuTrigger>...</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem inset onSelect={() => { console.log("Back") }}>
Back
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>In Base UI, you can do the same by passing a function to the onClick prop.
<ContextMenu>
<ContextMenuTrigger>...</ContextMenuTrigger>
<ContextMenuPositioner>
<ContextMenuContent>
<ContextMenuItem inset onClick={() => { console.log("Back") }}>
Back
</ContextMenuItem>
</ContextMenuContent>
</ContextMenuPositioner>
</ContextMenu>