Context Menu
Open contextual actions with a right-click or keyboard shortcut.
Preview
Import
import { ContextMenu, ContextMenuTrigger, ContextMenuSub, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuSubTrigger, ContextMenuSubContent } from "@sigil-ui/components";Usage
<ContextMenu>
<ContextMenuTrigger className="flex h-24 w-full items-center justify-center border border-dashed border-[var(--s-border)] text-[var(--s-text-muted)]">Right-click here</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>Cut</ContextMenuItem>
<ContextMenuItem>Copy</ContextMenuItem>
<ContextMenuItem>Paste</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>Sub-components
This component includes the following parts:
<ContextMenuTrigger><ContextMenuSub><ContextMenuContent><ContextMenuItem><ContextMenuCheckboxItem><ContextMenuRadioItem><ContextMenuLabel><ContextMenuSeparator><ContextMenuSubTrigger><ContextMenuSubContent>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-card-radius | Card radius |
--s-border-style | Border style |
--s-border | Border |
--s-surface | Surface |
--s-text | Text |
--s-shadow-md | Shadow md |
--s-radius-sm | Radius sm |
--s-background | Background |
--s-text-muted | Text muted |