Components / Context Menu
Context Menu
Right-click context menu with keyboard navigation (arrows, home/end, enter/escape), shortcuts, danger variants, and separators. Positioned at cursor location on contextmenu event.
overlays v0.7.0
Playground
Examples
File actions
Right-click this area
<cg-context-menu><div style="padding:24px 48px;border:2px dashed var(--cg-color-surface-container-border);border-radius:8px;color:var(--cg-color-surface-container-outlined);">Right-click this area</div></cg-context-menu>Import
import { CgContextMenu } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-context-menu';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Open state |
items | ContextMenuItem[] | [] | Menu items with id, label, icon, shortcut, disabled, danger, separator |
disabled | boolean | false | Disable the context menu |
Events
| Event | Detail | Description |
|---|---|---|
cg-context-menu-select | {id: string, item: ContextMenuItem} | Item selected |
cg-context-menu-open | {} | Menu opened |
cg-context-menu-close | {} | Menu closed |