Context Menu
A context menu component triggered by right-click or long press. Provides a list of contextual actions for the selected target with full RTL support.
const items: ContextMenuItem[] = [ { label: 'Open' }, { label: 'Download', tag: '⌘D' }, { label: 'Preview' }, { type: 'divider' },Installation
npx sdaia-ui@latest add context-menu
Usage
import { ContextMenu } from "@/components/ui/context-menu"<ContextMenu />Examples
Default
Context menu with a list of relevant actions. Right-click the target to trigger it.
<ContextMenu items={[ { label: 'Placeholder', items: subItems }, { label: 'Placeholder', items: subItems }, { label: 'Placeholder', items: subItems },API Reference
Context Menu Props
Props for the ContextMenu component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'item' | 'item' | optional |
label | string | - | optional |
items | ContextMenuDropdownItem[] | [] | optional |
disabled | boolean | false | optional |
destructive | boolean | false | optional |
leadingIcon | ReactNode | - | optional |
tag | string | - | optional |
onSelect | () => void; | - | optional |
Context Menu Item Props
Props for the ContextMenu Item sub-component.
Prop | Type | Default | Required |
|---|---|---|---|
label | string | - | optional |
onClick | () => void | - | optional |
disabled | boolean | false | optional |
destructive | boolean | false | optional |
leadingIcon | ReactNode | - | optional |
ContextMenu Dropdown Props
Props for the ContextMenu Dropdown component.
Prop | Type | Default | Required |
|---|---|---|---|
label | string | - | optional |
items | ContextMenuDropdownItem[] | - | optional |
disabled | boolean | false | optional |
destructive | boolean | false | optional |
leadingIcon | ReactNode | - | optional |
onSelect | () => void | - | optional |
open | boolean | - | optional |
defaultOpen? | boolean | - | optional |
onOpenChange | (open: boolean) => void; | - | optional |
tag | string | - | optional |
className | string | - | optional |