npx shadcn add https://hq-ui.vercel.app/r/context-menu
A simple context menu with a few actions.
Use ContextMenuSub to nest secondary actions.
Add ContextMenuShortcut to show keyboard hints.
Group related actions and separate them with dividers.
Combine icons with labels for quick scanning.
Use selectionMode="multiple" for toggles.
Use selectionMode="single" for exclusive choices.
Use variant="destructive" to style the menu item as destructive.
Control submenu placement with the placement prop.
Use placement="end" to place the menu on the logical end side of the trigger.
<ContextMenuTrigger>
<Pressable>
<div role="button">Right click here</div>
</Pressable>
<ContextMenu placement="end">
<ContextMenuItem>Profile</ContextMenuItem>
<ContextMenuItem>Billing</ContextMenuItem>
<ContextMenuItem>Team</ContextMenuItem>
<ContextMenuItem>Subscription</ContextMenuItem>
</ContextMenu>
</ContextMenuTrigger>See the React Aria documentation for more information.