Context Menu

An overlay component that reveals a targeted list of actions when triggered by a right-click.
For more information on this component configuration, visit Radix UI

Disabled Item

Use the disabled attr or the disabled class to disable an item component.

Sizes

Use the context-menu-content-{size} class to control the component size.

Size values can include:smmd.

For more information on all available sizing utilities, visit Tailwind

Customizing

globals.css


:root {
  --ex-context-menu-max-w-sm: var(--container-3xs);
  --ex-context-menu-max-w-md: var(--container-2xs);
 
  --ex-context-menu-radius-sm: var(--radius-sm);
  --ex-context-menu-radius-md: var(--radius-sm);
 
  --ex-context-menu-shadow-sm: var(--shadow-sm);
  --ex-context-menu-shadow-md: var(--shadow-sm);
 
  --ex-context-menu-section-gap-x-sm: calc(var(--spacing) * 1.5);
  --ex-context-menu-section-gap-x-md: calc(var(--spacing) * 2);
 
  --ex-context-menu-section-px-sm: calc(var(--spacing) * 1.5);
  --ex-context-menu-section-px-md: calc(var(--spacing) * 2);
 
  --ex-context-menu-section-py-sm: calc(var(--spacing) * 2);
  --ex-context-menu-section-py-md: calc(var(--spacing) * 2.5);
 
  --ex-context-menu-item-px-sm: calc(var(--spacing) * 2);
  --ex-context-menu-item-px-md: calc(var(--spacing) * 2);
 
  --ex-context-menu-item-py-sm: var(--spacing);
  --ex-context-menu-item-py-md: var(--spacing);
 
  --ex-context-menu-item-font-family: var(--font-sans);
  --ex-context-menu-item-font-weight: var(--font-weight-normal);
 
  --ex-context-menu-item-font-size-sm: var(--text-xs);
  --ex-context-menu-item-font-size-md: var(--text-sm);
 
  --ex-context-menu-item-indicator-font-size-sm: var(--text-xs);
  --ex-context-menu-item-indicator-font-size-md: var(--text-sm);
 
  --ex-context-menu-label-font-family: var(--font-sans);
  --ex-context-menu-label-font-weight: var(--font-weight-normal);
  --ex-context-menu-label-opacity: var(--ex-options-opacity-muted);
 
  --ex-context-menu-label-font-size-sm: var(--text-2xs);
  --ex-context-menu-label-font-size-md: var(--text-xs);
 
  --ex-context-menu-command-font-family: var(--font-sans);
  --ex-context-menu-command-font-weight: var(--font-weight-normal);
  --ex-context-menu-command-opacity: var(--ex-options-opacity-muted);
 
  --ex-context-menu-command-font-size-sm: var(--text-2xs);
  --ex-context-menu-command-font-size-md: var(--text-xs);
}

API

For more information on this component configuration, visit Radix UI

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`modal`	`boolean`	`true`
`onOpenChange`	`function`

Element	Selector
`ContextMenu.Trigger`	`.ex-context-menu-trigger`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`

Prop	Type	Default
`container`	`HTMLElement`	`document.body`
`forceMount`	`boolean`	`false`

Element	Selector
`ContextMenu.Content`	`.ex-context-menu-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`alignOffset`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`forceMount`	`boolean`	`false`
`hideWhenDetached`	`boolean`	`false`
`loop`	`boolean`	`false`
`sticky`	`enum of ["always", "partial"]`	`partial`
`onCloseAutoFocus`	`function`
`onFocusOutside`	`function`
`onInteractOutside`	`function`
`onPointerDownOutside`	`function`

Element	Selector
`ContextMenu.Section`	`.ex-context-menu-body`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`ContextMenu.Item`	`.ex-context-menu-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`textValue`	`string`
`onSelect`	`function`

Element	Selector
`ContextMenu.ItemIndicator`	`.ex-context-menu-item-indicator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	`true`

Element	Selector
`ContextMenu.Label`	`.ex-context-menu-label`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`ContextMenu.Command`	`.ex-context-menu-command`

Prop	Type	Default
`as`	`ElementType`	`kbd`
`asChild`	`boolean`	`false`

Element	Selector
`ContextMenu.Separator`	`.ex-context-menu-separator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`ContextMenu.RadioGroup`	`.ex-context-menu-radio-group`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`value`	`string`
`onValueChange`	`function`

Element	Selector
`ContextMenu.RadioItem`	`.ex-context-menu-radio-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`textValue`	`string`
`value`	`string`
`onSelect`	`function`

Element	Selector
`ContextMenu.CheckboxItem`	`.ex-context-menu-checkbox-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`checked`	`boolean`	`false`
`disabled`	`boolean`	`false`
`textValue`	`string`
`onCheckedChange`	`function`
`onSelect`	`function`

Context Sub

Element	Selector
`ContextMenu.Sub`	`.ex-context-menu-sub`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	`false`
`onOpenChange`	`function`

Context Sub Trigger

Element	Selector
`ContextMenu.SubTrigger`	`.ex-context-menu-sub-trigger`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`textValue`	`string`

Context Sub Content

Element	Selector
`ContextMenu.SubContent`	`.ex-context-menu-sub-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`alignOffset`	`number`	`-8`
`avoidCollisions`	`boolean`	`true`
`forceMount`	`boolean`	`false`
`hideWhenDetached`	`boolean`	`false`
`loop`	`boolean`	`false`
`sideOffset`	`number`	`0`
`sticky`	`enum of ["always", "partial"]`	`partial`
`onFocusOutside`	`function`
`onInteractOutside`	`function`
`onPointerDownOutside`	`function`

Context Menu

Disabled Item

Sizes

Customizing

API

Context Menu

Context Menu Trigger

Context Menu Portal

Context Menu Content

Context Menu Section

Context Menu Item

Context Menu Indicator

Context Menu Label

Context Menu Command

Context Menu Separator

Context Menu RadioGroup

Context Menu RadioItem

Context Menu CheckboxItem

Context Sub

Context Sub Trigger

Context Sub Content