A right-click menu for a region, opening at the pointer with icons, separators, and danger rows — and reachable from the keyboard through the Menu key.
DefaultDanger itemDisabled itemKeyboard
Invoice INV-2032
Right-click the card, or focus it and press the Menu key
<ContextMenu ariaLabel="Actions for invoice INV-2032" items={actions} onselect={run}> <InvoiceCard {invoice} /></ContextMenu>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { ContextMenu } from '@chanrg/4ui';<ContextMenu ariaLabel="Actions for invoice INV-2032" items={actions} onselect={run}> <InvoiceCard {invoice} /></ContextMenu>Without icons
Icons are optional; a label-only menu keeps its rows aligned with the same leading gap.
Ana Ruiz
No action yet
<ContextMenu ariaLabel="Actions for Ana Ruiz" items={[ { key: 'profile', label: 'View profile' }, { key: 'remove', label: 'Remove from team', danger: true, separatorBefore: true }]}> <MemberCard {member} /></ContextMenu>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ContextMenuItem[] | [] | Actions offered for the region. An empty list leaves the native menu alone. |
item.key / label / icon | string | — | Stable key (the list is keyed), visible text, optional glyph. |
item.disabled / danger / separatorBefore | boolean | false | Skipped while roving, red text, and a divider above the row. |
ariaLabel | string | 'Context menu' | Names the menu. Say what it acts on: “Actions for invoice INV-2032”. |
open | boolean ($bindable) | false | Whether the menu is showing. |
onselect / onopenchange | (key) => void / (open) => void | — | Selection fires after the menu has closed, so a handler can take focus. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
--4ui-shadow-float | Elevation of the floating menu. |
--4ui-z-popover | Stacking order of the portalled menu. |
Accessibility
- role="menu"/"menuitem" with roving focus: arrows skip disabled rows, Home and End jump to the ends.
- The region is a tab stop and answers the Menu key and Shift+F10, so actions hidden behind a right-click stay reachable without a pointer.
- Focus moves into the menu on open and back to the region on Escape, Tab, or selection.
- With no items the browser’s own context menu is left alone.