Context Menu
A menu of actions that opens on right-click or long-press.
When to use
- Shortcuts for items users act on often: table rows, files, records in a list.
When not to use
- The only way to reach an action: add a visible Dropdown Menu on the row as well.
- Actions for the whole page: use Buttons or a Menubar.
Install
npx shadcn@latest add @clinia/context-menu| Patient | ID | Actions |
|---|---|---|
| Jane Cooper | P-001 | |
| Floyd Miles | P-002 |
Right-click a row, or open its menu: both list the same actions.
Anatomy
- 1Trigger area
data-slot="context-menu-trigger"select-none - 2Menu, at the pointer
data-slot="context-menu-content"bg-popover · rounded-lg · p-1.5 - 3Item
data-slot="context-menu-item"text-sm · font-medium - 4Shortcut
data-slot="context-menu-shortcut"text-xs · text-muted-foreground - 5Destructive item, last
[data-slot=context-menu-item][data-variant=destructive]text-destructive
Clinia rules
- Items look like Dropdown Menu items: a
bg-foreground/4highlight withtext-foreground, anddestructiveitems in red, last, after a separator. - Mirror the row's Dropdown Menu: same labels, same order.
- Show a
ContextMenuShortcutonly for a shortcut your app actually registers.
States
Toggle the site theme to review both themes.
Accessibility
Built in
- Opens at the pointer on right-click, or on long-press on touch screens.
- Inside, arrow keys move the highlight and loop at the ends, and Escape closes the menu.
Your responsibility
- Every action in a context menu must also be reachable another way, such as a row's action button: right-click isn't discoverable, and not every user can do it.
- The trigger area disables text selection (
select-none). Don't wrap text users need to copy, such as a record ID, without a Copy item in the menu.
How to test
- Right-click the trigger area: the menu opens at the pointer.
- Press Arrow Down and Arrow Up: the highlight moves and wraps. Press Escape: the menu closes.
- On a phone, long-press the area: the menu opens.
- Check that every item is also reachable from a visible control on the page.
API
ContextMenuItem
| Prop | Values | Default | Description |
|---|---|---|---|
| inset | boolean | – | Indents the item to line up with siblings that have an icon or an indicator. |
| variant | defaultdestructive | default |
|
ContextMenuCheckboxItem
| Prop | Values | Default | Description |
|---|---|---|---|
| inset | boolean | – | Indents the item to line up with siblings that have an icon or an indicator. |
ContextMenuRadioItem
| Prop | Values | Default | Description |
|---|---|---|---|
| inset | boolean | – | Indents the item to line up with siblings that have an icon or an indicator. |
ContextMenuLabel
| Prop | Values | Default | Description |
|---|---|---|---|
| inset | boolean | – | Indents the label to line up with items that have an icon or an indicator. |
ContextMenuSubTrigger
| Prop | Values | Default | Description |
|---|---|---|---|
| inset | boolean | – | Indents the item to line up with siblings that have an icon or an indicator. |
All other props come from Base UI Context Menu.