Context Menu

A floating menu triggered by right-click (or long press on mobile). Displays contextual actions relevant to the clicked element.

Preview

Item types

Type	Appearance
Default	Standard item with optional icon and shortcut
With icon	Leading icon for identification
With shortcut	Right-aligned keyboard hint
Divider	Horizontal separator between groups
Disabled	Reduced opacity, non-interactive
Destructive	Red text and icon for dangerous actions

Props

Prop	Type	Default	Description
items	ContextMenuItem[]	--	Menu items
onSelect	(value: string) => void	--	Item selection handler

ContextMenuItem

Field	Type	Description
label	string	Item text
value	string	Selection value
icon	ReactNode	Leading icon
shortcut	string	Keyboard shortcut
danger	boolean	Destructive styling
disabled	boolean	Disabled state
divider	boolean	Render as divider

Code example

React

import { ContextMenu, ContextMenuTrigger } from '@thepace/lexicon/components';

<ContextMenuTrigger>
  <div className="file-card">Right-click me</div>
  <ContextMenu
    items={[
      { label: 'Edit', value: 'edit', shortcut: '⌘E' },
      { label: 'Duplicate', value: 'duplicate', shortcut: '⌘D' },
      { divider: true },
      { label: 'Delete', value: 'delete', danger: true, shortcut: '⌫' },
    ]}
    onSelect={handleAction}
  />
</ContextMenuTrigger>

Vanilla HTML

<div class="lex-context-menu" role="menu">
  <button class="lex-context-menu__item" role="menuitem">
    <svg class="lex-context-menu__icon"><!-- icon --></svg>
    <span class="lex-context-menu__label">Edit</span>
    <span class="lex-context-menu__shortcut">⌘E</span>
  </button>
  <div class="lex-context-menu__divider" role="separator"></div>
  <button class="lex-context-menu__item lex-context-menu__item--danger" role="menuitem">
    <span class="lex-context-menu__label">Delete</span>
  </button>
</div>

CSS class reference

Class	Purpose
.lex-context-menu	Floating container
.lex-context-menu__item	Menu item
.lex-context-menu__item--danger	Destructive item
.lex-context-menu__item--disabled	Disabled item
.lex-context-menu__icon	Leading icon
.lex-context-menu__label	Item text
.lex-context-menu__shortcut	Keyboard hint
.lex-context-menu__divider	Section separator

Accessibility

• Container uses role="menu".
• Items use role="menuitem".
• Dividers use role="separator".
• Arrow keys navigate items. Home/End jump to first/last.
• Escape closes the menu and returns focus to the trigger.
• Disabled items are skipped in keyboard navigation.

Guidelines

Do

• Group related actions with dividers.
• Place destructive actions at the bottom, separated by a divider.
• Show keyboard shortcuts for power users.

Don't

• Don't put more than 8–10 items — reorganise with sub-menus.
• Don't use context menus as the only way to access actions.
• Don't nest more than one level of sub-menus.