videorc/uiKebab Context Menu
The right-click twin of a row's ⋯ menu, built from the same item list, so the two menus can never disagree.
Installation
$ pnpm dlx shadcn@latest add @videorc/kebab-context-menuIt brings Kebab Menu with it, for the item type and the grouping.
Usage
import { KebabContextMenu } from "@/components/kebab-context-menu";
import { KebabMenu } from "@/components/kebab-menu";<KebabContextMenu items={items}>
<div className="group/kebab-host flex items-center">
Launch demo
<KebabMenu items={items} label="Actions for Launch demo" />
</div>
</KebabContextMenu>The child is the row itself: it becomes the trigger and keeps its own element. Pass the same items to both menus. Groups, keys, disabled reasons and the destructive item last come out exactly as in the ⋯ menu.
Use it on rows that already have a ⋯ menu, so a right-click finds the same actions. Don't give the context menu items the ⋯ menu doesn't have: a right-click is a shortcut, never the only way.
Theming
It's Context Menu underneath: the same float glass, 28 px items and hairline groups as the ⋯ menu.
| Token or attribute | Meaning |
|---|---|
data-slot="context-menu-trigger" | Added to the row |
select-none | Added to the row, so a right-click doesn't select its text |
Keyboard
| Key | Action |
|---|---|
| ↑ ↓ | Moves through the items |
| Enter | Runs the highlighted item |
| Esc | Closes the menu |
Accessibility
A context menu has no keyboard way in of its own, which is why it only ever repeats the row's ⋯ menu: keyboard and screen reader users reach every action there.
API reference
Prop
Type
Kebab Menu
The ⋯ menu for an item's low-frequency actions. One item list grouped by hairlines, the destructive item last in red, keys on the right, and a trigger that can wait for its row's hover.
Confirm Dialog
The one recipe for a destructive confirmation, over Alert Dialog. A "Verb object?" title, one sentence on what is lost, a focused safe answer, and the owner closes it.