Context Menu | Destyler

Displays a menu located at the pointer, triggered by a right click or a long press.

Features

Supports submenus with configurable reading direction.
Supports items, labels, groups of items.
Supports checkable items (single or multiple) with optional indeterminate state.
Supports modal and non-modal modes.
Customize side, alignment, offsets, collision handling.
Focus is fully managed.
Full keyboard navigation.
Typeahead support.
Dismissing and layering behavior is highly customizable.
Triggers with a long press on touch devices

Install

Import

API

Root

Props	Type	Default
dir	`Direction`	ltr
modal	`boolean`	true

Event	Type
update:open	`[_open: boolean]`

Trigger

Props	Type	Default
as	`AsTag \| Component`	span
asChild	`boolean`	false
disabled	`boolean`	false

Data attribute	Value
[data-state]	'open' \| 'closed'
[data-disabled]	Present when disabled

Arrow

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
height	`number`	5
width	`number`	10

Portal

Props	Type	Default
disabled	`boolean`	false
forceMount	`boolean`	false
to	`string \| HTMLElement`	body

Content

Props	Type	Default
alignOffset	`number`	0
as	`AsTag \| Component`	div
asChild	`boolean`	false
avoidCollisions	`boolean`	true
collisionBoundary	`Element \| (Element \| null)[] \| null`	() => []
collisionPadding	`number \| Partial<Record<'left' \| 'right' \| 'top' \| 'bottom', number>>`	0
forceMount	`boolean`	false
hideWhenDetached	`boolean`	false
loop	`boolean`	false
prioritizePosition	`boolean`	false
sticky	`'partial' \| 'always'`	partial

Event	Type
closeAutoFocus	`[_event: Event]`
escapeKeyDown	`[_event: KeyboardEvent]`
focusOutside	`[_event: CustomEvent<{ originalEvent: FocusEvent; }>]`
interactOutside	`[_event: CustomEvent<{ originalEvent: PointerEvent; }> \| CustomEvent<{ originalEvent: FocusEvent; }>]`
pointerDownOutside	`[_event: CustomEvent<{ originalEvent: PointerEvent; }>]`

Data attribute	Value
[data-state]	'open' \| 'closed'
[data-side]	'left' \| 'right' \| 'bottom' \| 'top'
[data-align]	'start' \| 'end' \| 'center'

CSS Variable	Description
--destyler-context-menu-content-transform-origin	The `transform-origin` computed from the content and arrow positions/offsets
--destyler-context-menu-content-available-width	The remaining width between the trigger and the boundary edge
--destyler-context-menu-content-available-height	The remaining height between the trigger and the boundary edge
--destyler-context-menu-trigger-width	The width of the trigger
--destyler-context-menu-trigger-height	The height of the trigger

Group

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false

RadioGroup

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
modelValue	`string`	-

Event	Type
update:modelValue	`[_payload: string]`

Label

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false

Item

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
disabled	`boolean`	false
textValue	`string`	-

Event	Type
select	`[_event: Event]`

Data attribute	Value
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

CheckboxItem

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
checked	`CheckedState`	false
disabled	`boolean`	false
textValue	`string`	-

Event	Type
select	`[_event: Event]`
update:checked	`[_checked: CheckedState]`

Data attribute	Value
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled
[data-state]	'checked' \| 'unchecked' \| 'indeterminate'

RadioItem

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
disabled	`boolean`	false
textValue	`string`	-
value	`string`	on

Event	Type
select	`[_event: Event]`

Data attribute	Value
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled
[data-state]	'checked' \| 'unchecked' \| 'indeterminate'

ItemIndicator

Props	Type	Default
as	`AsTag \| Component`	span
asChild	`boolean`	false
forceMount	`boolean`	false

Data attribute	Value
[data-state]	'checked' \| 'unchecked' \| 'indeterminate'

Separator

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false

Sub

Props	Type	Default
defaultOpen	`boolean`	false
open	`boolean`	undefined

Event	Type
update:open	`[_open: boolean]`

Slot (default)	Type
open	`boolean \| undefined`

SubTrigger

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
disabled	`boolean`	false
textValue	`string`	-

Data attribute	Value
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled
[data-state]	'open' \| 'closed'

SubContent

Props	Type	Default
alignOffset	`number`	0
arrowPadding	`number`	0
as	`AsTag \| Component`	div
asChild	`boolean`	false
avoidCollisions	`boolean`	true
collisionBoundary	`Element \| (Element \| null)[] \| null`	() => []
collisionPadding	`number \| Partial<Record<'left' \| 'right' \| 'top' \| 'bottom', number>>`	0
forceMount	`boolean`	false
hideWhenDetached	`boolean`	false
loop	`boolean`	false
prioritizePosition	`boolean`	false
sideOffset	`number`	0
sticky	`'partial' \| 'always'`	partial
updatePositionStrategy	`'always' \| 'optimized'`	optimized

Event	Type
closeAutoFocus	`[_event: Event]`
entryFocus	`[_event: Event]`
escapeKeyDown	`[_event: KeyboardEvent]`
focusOutside	`[_event: CustomEvent<{ originalEvent: FocusEvent; }>]`
interactOutside	`[_event: CustomEvent<{ originalEvent: PointerEvent; }> \| CustomEvent<{ originalEvent: FocusEvent; }>]`
openAutoFocus	`[_event: Event]`
pointerDownOutside	`[_event: CustomEvent<{ originalEvent: PointerEvent; }>]`

Data attribute	Value
[data-state]	'open' \| 'closed'
[data-side]	'left' \| 'right' \| 'bottom' \| 'top'
[data-align]	'start' \| 'end' \| 'center'

CSS Variable	Description
--destyler-context-menu-content-transform-origin	The `transform-origin` computed from the content and arrow positions/offsets
--destyler-context-menu-content-available-width	The remaining width between the trigger and the boundary edge
--destyler-context-menu-content-available-height	The remaining height between the trigger and the boundary edge
--destyler-context-menu-trigger-width	The width of the trigger
--destyler-context-menu-trigger-height	The height of the trigger