Components / Overlays
ContextMenu Stable A menu that opens at the pointer on right-click, long-press, Shift+F10 or the Menu key.
Use ContextMenu for shortcuts to actions on a specific object, such as a block in the signature editor or a row in a document list. Every action in a context menu must also be reachable another way (a toolbar or ActionMenu), because context menus are hard to discover. It shares its item parts and keyboard model with DropdownMenu.
Overview
tsx Copy
import * as React from 'react';
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from '@bindshq/stance-react';
const area: React.CSSProperties = {
display: 'grid',
placeItems: 'center',
width: 'min(100%, 360px)',
height: 160,
border: '1px dashed var(--st-color-border-strong)',
borderRadius: 'var(--st-radius-lg)',
color: 'var(--st-color-fg-muted)',
fontSize: 'var(--st-font-size-sm)',
textAlign: 'center',
padding: 16,
};
export function Basic() {
return (
<ContextMenu>
<ContextMenuTrigger tabIndex={0} aria-label="Signature block: logo" style={area}>
Right-click the logo block
</ContextMenuTrigger>
<ContextMenuContent aria-label="Block actions">
<ContextMenuItem>Replace image</ContextMenuItem>
<ContextMenuItem>Edit link</ContextMenuItem>
<ContextMenuItem>Duplicate block</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem destructive>Remove block</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
);
}Light, dark and high contrast Every Stance component is designed and tested in all three appearance modes.
Import tsx Copy
import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent } from '@bindshq/stance-react';Examples
tsx Copy
import * as React from 'react';
import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuTrigger } from '@bindshq/stance-react';
const area: React.CSSProperties = {
display: 'grid',
placeItems: 'center',
width: 'min(100%, 360px)',
height: 160,
border: '1px dashed var(--st-color-border-strong)',
borderRadius: 'var(--st-radius-lg)',
color: 'var(--st-color-fg-muted)',
fontSize: 'var(--st-font-size-sm)',
textAlign: 'center',
padding: 16,
};
export function Toggles() {
const [grid, setGrid] = React.useState(true);
const [guides, setGuides] = React.useState(false);
return (
<ContextMenu>
<ContextMenuTrigger tabIndex={0} aria-label="Editor canvas" style={area}>
Editor canvas, right-click for view options
</ContextMenuTrigger>
<ContextMenuContent aria-label="View options">
<ContextMenuCheckboxItem checked={grid} onCheckedChange={setGrid}>
Show grid
</ContextMenuCheckboxItem>
<ContextMenuCheckboxItem checked={guides} onCheckedChange={setGuides}>
Show safe-area guides
</ContextMenuCheckboxItem>
</ContextMenuContent>
</ContextMenu>
);
}API reference ContextMenuCheckboxItem / RadioItem / Sub…Accessibility Opens from the keyboard with Shift+F10 or the ContextMenu key while focus is inside the trigger area. The menu is positioned at the pointer (or the focused element for keyboard) and receives focus on open. Focus returns to the element that had it before the menu opened. Long-press support makes the menu usable on touch screens; the browser callout is suppressed. Provide every action elsewhere too. Context menus are not discoverable. Keyboard Usage guidelines Do Mirror the actions in a visible toolbar or ActionMenu. Keep the most frequent action first. Don’t Hide critical or unique functionality only in a context menu. Override the browser menu on text the user may want to copy.