Getting Started
Foundations
Components
Search for a command to run...
Context menus (also called right-click menus or contextual menus) provide quick access to actions relevant to a specific element or area. They appear at the pointer location when users right-click (or use equivalent gestures) on the trigger element. Context menus are ideal for providing shortcuts to common actions without cluttering the main interface, such as copy/paste operations, file actions, or element-specific commands.
Built on top of Radix UI's ContextMenu primitive with full keyboard navigation (Arrow keys to navigate, Enter to select, Escape to close), type-ahead search, automatic positioning with collision detection, and accessibility support including proper ARIA attributes.
import { ContextMenu } from "@strongtie/design-system/context-menu"This module exports the following components:
ContextMenuContextMenuTriggerContextMenuContentContextMenuItemContextMenuCheckboxItemContextMenuRadioItemContextMenuLabelContextMenuSeparatorContextMenuShortcutContextMenuGroupContextMenuPortalContextMenuSubContextMenuSubContentContextMenuSubTriggerContextMenuRadioGroup<ContextMenuItem>This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | |
variant | default | destructive | default |
<ContextMenuLabel>This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - |
<ContextMenuSubTrigger>This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - |
Components can be styled using the className prop. The design system uses Tailwind CSS for styling.
The following data attributes are used to identify component parts:
context-menucontext-menu-checkbox-itemcontext-menu-contentcontext-menu-groupcontext-menu-itemcontext-menu-labelcontext-menu-portalcontext-menu-radio-groupcontext-menu-radio-itemcontext-menu-separatorcontext-menu-shortcutcontext-menu-subcontext-menu-sub-contentcontext-menu-sub-triggercontext-menu-triggerOther CSS classes used by this component:
context-menu-contentcontext-menu-sub-contentmenu-itemmenu-item-checkboxmenu-item-indicatormenu-item-labelmenu-item-radiomenu-item-separatormenu-item-shortcutmenu-item-sub-triggerThis component inherits accessibility features from Radix UI, including: