Context Menu
Displays a menu of actions or functions at the pointer when the user right-clicks an element, with submenus, checkboxes and shortcuts.
Base UI
Shadcn UI
LucideInstallation
bash
npx shadcn@latest add @redpanda/context-menubash
pnpm dlx shadcn@latest add @redpanda/context-menubash
yarn dlx shadcn@latest add @redpanda/context-menubash
bunx shadcn@latest add @redpanda/context-menubash
nubx shadcn@latest add @redpanda/context-menubash
aube dlx shadcn@latest add @redpanda/context-menuWhen to use
Use this decision tree to determine when to use the Context Menu component:
Usage
tsx
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';tsx
<ContextMenu> <ContextMenuTrigger>Right click</ContextMenuTrigger> <ContextMenuContent> <ContextMenuItem>Profile</ContextMenuItem> <ContextMenuItem>Billing</ContextMenuItem> <ContextMenuItem>Team</ContextMenuItem> <ContextMenuItem>Subscription</ContextMenuItem> </ContextMenuContent></ContextMenu>Examples
Submenu
Checkbox items
Radio group
Grouped actions
Props
Keyboard interactions
| Key | Action |
|---|---|
Shift+F10 on the trigger |
Opens the context menu (standards-compliant keyboard equivalent of right-click). |
ArrowUp / ArrowDown |
Moves between items. Wraps at the edges. |
ArrowLeft / ArrowRight |
Opens / closes submenus. |
Home / End |
Jumps to first / last item. |
Enter / Space |
Activates the focused item. |
Escape |
Closes the menu. |
| Typing a character | Typeahead jumps to the next matching item. |
Accessibility
- The trigger region is marked
role="group"and advertises the context menu viaaria-haspopup="menu"— screen-reader users can reach the menu without a pointing device by pressingShift+F10while focused inside. - Menu items adopt
role="menuitem"/menuitemcheckbox/menuitemradio, with roving focus inside the popup. - Use a visible outline / ring on the trigger region so keyboard users know where to press
Shift+F10. - Keep context-menu-only actions non-essential — mirror every action elsewhere (toolbar, main menu) so pointer-restricted users are not blocked.