Reference

Menu

Menu, dressed in the paper-and-ink system: a quiet paper vessel on elevation, hover as light on the row, checked items as the flat ink fill. The parts — Root, Trigger, ContextTrigger, Indicator, Positioner, Content, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel, TriggerItem, Separator, Arrow, ArrowTip. Ark's namespace is frozen — spread copies the members as data properties so Root can be the sized wrapper and Content carries the rung while the rest stay Ark's own parts.

Arrow · ArrowTip · Content · ContextTrigger · Indicator · Item · ItemGroup · ItemGroupLabel · ItemIndicator · ItemText · Positioner · Separator · Trigger · TriggerItem

#ArrowTip

A styled part — no props of its own; it takes the anatomy's shared styling.

#Arrow

A styled part — no props of its own; it takes the anatomy's shared styling.

#CheckboxItem

Event	Payload
`update:checked`	`value: boolean`

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#ContextTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Indicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemContext

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemGroupLabel

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemGroup

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemIndicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Default	Description
`closeOnSelect`	`boolean \| undefined`		Whether the menu should be closed when the option is selected.
`disabled`	`boolean \| undefined`		Whether the menu item is disabled
`value`	`string`		The unique value of the menu item option.
`valueText`	`string \| undefined`		The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

Event	Payload
`select`	`—`

#Positioner

A styled part — no props of its own; it takes the anatomy's shared styling.

#RadioItemGroup

Prop	Type	Default	Description
`id`	`string`		—
`modelValue`	`string`		—

Event	Payload
`update:modelValue`	`value: string`

#RadioItem

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the vessel's rows.
`anchorPoint`	`menu.Point`		The positioning point for the menu. Can be set by the context menu trigger or the button trigger.
`aria-label`	`string`		The accessibility label for the menu
`closeOnSelect`	`boolean`	`true`	Whether to close the menu when an option is selected
`composite`	`boolean`	`true`	Whether the menu is a composed with other composite widgets like a combobox or tabs
`defaultHighlightedValue`	`string`		The initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.
`defaultOpen`	`boolean`		The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.
`defaultTriggerValue`	`string \| null`		The initial trigger value when rendered. Use when you don't need to control the trigger value.
`highlightedValue`	`string`		The controlled highlighted value of the menu item.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ trigger: string; contextTrigger: string; content: string; groupLabel(id: string): string; group(id: string): string; positioner: string; arrow: string; }>`		The ids of the elements in the menu. Useful for composition.
`loopFocus`	`boolean`	`false`	Whether to loop the keyboard navigation.
`navigate`	`(details: menu.NavigateDetails) => void`		Function to navigate to the selected item if it's an anchor element
`open`	`boolean`		The controlled open state of the menu
`positioning`	`menu.PositioningOptions`		The options used to dynamically position the menu
`triggerValue`	`string \| null`		The value of the trigger that currently open the menu
`typeahead`	`boolean`	`true`	Whether the pressing printable characters should trigger typeahead navigation

Event	Payload
`select`	`details: SelectionDetails`
`exitComplete`	`—`
`openChange`	`details: OpenChangeDetails`
`update:open`	`open: boolean`
`triggerValueChange`	`details: TriggerValueChangeDetails`
`update:triggerValue`	`triggerValue: string \| null`
`focusOutside`	`event: FocusOutsideEvent`
`interactOutside`	`event: InteractOutsideEvent`
`pointerDownOutside`	`event: PointerDownOutsideEvent`
`highlightChange`	`details: HighlightChangeDetails`
`update:highlightedValue`	`highlightedValue: string \| null`
`escapeKeyDown`	`event: KeyboardEvent`
`requestDismiss`	`event: CustomEvent<{ originalLayer: HTMLElement; targetLayer: HTMLElement \| undefined; originalIndex: number; targetIndex: number; }>`

#Separator

A styled part — no props of its own; it takes the anatomy's shared styling.

#TriggerItem

A styled part — no props of its own; it takes the anatomy's shared styling.

#Trigger

Prop	Type	Default	Description
`value`	`string`		The value that identifies this specific trigger