127 Components
Context Menu & Popover
OverlaysFrosted glassmorphic context menu and popover with a directional pointer arrow, hairline-divided action groups, keyboard shortcuts, and red destructive items.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/apple-context-menu.json"
Props
TypeScript props supported by <AppleContextMenu />.
| Prop | Type | Default | Description |
|---|---|---|---|
| groups | ContextMenuGroup[] | — | Array of action groups separated by hairline dividers. |
| triggerLabel | string | "Actions Menu" | Label displayed inside the menu trigger button. |
| defaultOpen | boolean | false | Initial open state when rendered. |
| onSelect | (item: ContextMenuItem) => void | — | Callback fired when any menu item is clicked. |
| className | string | — | Additional Tailwind CSS classes for the wrapper. |
Key Features
- Frosted `backdrop-blur-xl` panel with a diamond-rotated top pointer arrow.
- Supports both left-click button trigger and right-click context menu activation.
- Hairline-divided action groups with dedicated red styling for destructive actions.
Keyboard & Accessibility
- Uses `role='menu'` and `role='menuitem'` with `aria-haspopup='menu'` and `aria-expanded`.
- Dismisses automatically on `Escape` key press or outside pointer click.
- Respects `prefers-reduced-motion` for menu scale transitions.