ContextMenu

A menu that opens at the pointer on a right-click. Every part inside it is the menu's own; only the root and the trigger differ.

import { ContextMenu } from '@basmilius/react-ui';

import { ClipboardPaste, Copy, Scissors } from 'lucide-react';
import { ContextMenu, EDIT_SHORTCUTS, Icon, Kbd } from '@basmilius/react-ui';

export default function ContextMenuDemo() {
    return (
        <ContextMenu.Root>
            <ContextMenu.Trigger className="grid h-40 w-full max-w-md place-items-center rounded-lg border border-dashed border-border-strong text-xs text-text-muted">
                Right-click anywhere in here
            </ContextMenu.Trigger>
            <ContextMenu.Popup>
                <ContextMenu.Item>
                    <Icon icon={Scissors} size={14} /> Cut <Kbd shortcut={EDIT_SHORTCUTS.cut} />
                </ContextMenu.Item>
                <ContextMenu.Item>
                    <Icon icon={Copy} size={14} /> Copy <Kbd shortcut={EDIT_SHORTCUTS.copy} />
                </ContextMenu.Item>
                <ContextMenu.Item>
                    <Icon icon={ClipboardPaste} size={14} /> Paste <Kbd shortcut={EDIT_SHORTCUTS.paste} />
                </ContextMenu.Item>
                <ContextMenu.Separator />
                <ContextMenu.SubmenuRoot>
                    <ContextMenu.SubmenuTrigger>New</ContextMenu.SubmenuTrigger>
                    <ContextMenu.Popup>
                        <ContextMenu.Item>File</ContextMenu.Item>
                        <ContextMenu.Item>Folder</ContextMenu.Item>
                    </ContextMenu.Popup>
                </ContextMenu.SubmenuRoot>
            </ContextMenu.Popup>
        </ContextMenu.Root>
    );
}

Parts

ContextMenu.Root holds the open state and ContextMenu.Trigger is the area a right-click opens the menu over. Every other part is the menu's own under another name: ContextMenu.Popup, ContextMenu.Item, ContextMenu.CheckboxItem, ContextMenu.RadioGroup, ContextMenu.RadioItem, ContextMenu.Group, ContextMenu.GroupLabel, ContextMenu.Label, ContextMenu.Separator, ContextMenu.Hint, ContextMenu.Check, ContextMenu.SubmenuRoot and ContextMenu.SubmenuTrigger. See Menu for what each does.

ContextMenu.Popup opens at the pointer, which its positioner already knows, so it needs no placement. A submenu inside it sits beside its row like any other.

Anywhere text can be selected, a right-click should offer to copy it. TextMenu is a context menu that does that for a block of text.