Context Menu
A menu that appears at the pointer on right click or long press.
Context menu wraps the Base UI Context Menu
primitive, positions its popup with Base UI's Positioner and marks each part
with data-slot.
Installation
npx shadcn@latest add @kosori/context-menuExample
context-menu-example.tsx
Right click here
import {
IconCopy,
IconPencil,
IconShare,
IconTrash,
} from '@tabler/icons-react';
import {
ContextMenu,
ContextMenuItem,
ContextMenuPopup,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuTrigger,
} from '@/components/ui/context-menu';
const ContextMenuExample = () => (
<ContextMenu>
<ContextMenuTrigger className='flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm'>
Right click here
</ContextMenuTrigger>
<ContextMenuPopup>
<ContextMenuItem>
<IconPencil aria-hidden='true' />
Edit
<ContextMenuShortcut>⌘E</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem>
<IconCopy aria-hidden='true' />
Copy
<ContextMenuShortcut>⌘C</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem>
<IconShare aria-hidden='true' />
Share
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem variant='destructive'>
<IconTrash aria-hidden='true' />
Delete
<ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
</ContextMenuItem>
</ContextMenuPopup>
</ContextMenu>
);
export default ContextMenuExample;
Usage
import {
ContextMenu,
ContextMenuItem,
ContextMenuPopup,
ContextMenuTrigger,
} from '@/components/ui/context-menu';
const ContextMenuDemo = () => (
<ContextMenu>
<ContextMenuTrigger className='flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed'>
Right click here
</ContextMenuTrigger>
<ContextMenuPopup>
<ContextMenuItem>Edit</ContextMenuItem>
<ContextMenuItem>Delete</ContextMenuItem>
</ContextMenuPopup>
</ContextMenu>
);