Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Features

Can be controlled or uncontrolled.
Supports submenus with configurable reading direction.
Supports items, labels, groups of items.
Supports checkable items (single or multiple).
Customize side, alignment, offsets, collision handling.
Optionally render a pointing arrow.
Focus is fully managed.
Full keyboard navigation.
Typeahead support.

Install

Import

API

Root

Props	Type	Default
defaultValue	`string`	undefined
dir	`Direction`	ltr
loop	`boolean`	false
modelValue	`string`	undefined

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

Props	Type	Default
value	`string`	undefined

Trigger

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

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

Portal

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

Content

Props	Type	Default
align	`'start' \| 'center' \| 'end'`	center
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
disableOutsidePointerEvents	`boolean`	false
disableOutsideScroll	`boolean`	-
forceMount	`boolean`	false
hideWhenDetached	`boolean`	false
loop	`boolean`	false
prioritizePosition	`boolean`	false
side	`'left' \| 'right' \| 'top' \| 'bottom'`	bottom
sideOffset	`number`	0
sticky	`'partial' \| 'always'`	partial
trapFocus	`boolean`	false
updatePositionStrategy	`'always' \| 'optimized'`	optimized

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'
[data-orientation]	'vertical' \| 'horizontal'

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

Label

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

Group

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-disabled]	Present when disabled
[data-highlighted]	Present when highlighted

ItemIndicator

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

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

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-state]	'checked' \| 'unchecked'
[data-disabled]	Present when disabled
[data-highlighted]	Present when highlighted

RadioGroup

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

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

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-state]	'checked' \| 'unchecked'
[data-disabled]	Present when disabled
[data-highlighted]	Present when highlighted

Sub

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

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

SubTrigger

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

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

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'
[data-orientation]	'vertical' \| 'horizontal'

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

Separator

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

Arrow

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