Dropdown Menu

A vertically stacked menu that appears when triggered by a button.

When To Use

When you need to display a list of actions or options that would otherwise clutter the UI
For providing contextual actions for elements on the page
When you want to create nested hierarchical menus
As an alternative to traditional navigation patterns in space-constrained interfaces

A basic Dropdown Menu with simple items.

A Dropdown Menu with checkbox items for multiple selection.

A Dropdown Menu with radio items for single selection.

A Dropdown Menu with nested submenus.

Prop	Type	Default
`asChild?`	`boolean`	-
`value?`	`string \| number \| readonly string[]`	-
`type?`	`"button" \| "submit" \| "reset"`	-
`name?`	`string`	-
`formTarget?`	`string`	-
`formNoValidate?`	`boolean`	-
`formMethod?`	`string`	-
`formEncType?`	`string`	-
`formAction?`	`string \| ((formData: FormData) => void \| Promise<void>)`	-
`disabled?`	`boolean`	-
`key?`	`Key \| null`	-
`ref?`	`Ref<HTMLButtonElement>`	-
`form?`	`string`	-

Prop	Type	Default
`forceMount?`	`true`	-
`onInteractOutside?`	`((event: PointerDownOutsideEvent \| FocusOutsideEvent) => void)`	-
`onFocusOutside?`	`((event: FocusOutsideEvent) => void)`	-
`onPointerDownOutside?`	`((event: PointerDownOutsideEvent) => void)`	-
`onEscapeKeyDown?`	`((event: KeyboardEvent) => void)`	-
`loop?`	`boolean`	`false`
`onCloseAutoFocus?`	`((event: Event) => void)`	-
`updatePositionStrategy?`	`"always" \| "optimized"`	-
`hideWhenDetached?`	`boolean`	-
`sticky?`	`"partial" \| "always"`	-
`collisionPadding?`	`number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>`	-
`collisionBoundary?`	`Boundary \| Boundary[]`	-
`avoidCollisions?`	`boolean`	-
`arrowPadding?`	`number`	-
`alignOffset?`	`number`	-
`align?`	`"center" \| "start" \| "end"`	-
`sideOffset?`	`number`	-
`side?`	`"top" \| "right" \| "bottom" \| "left"`	-
`asChild?`	`boolean`	-
`key?`	`Key \| null`	-
`ref?`	`Ref<HTMLDivElement>`	-

Prop	Type	Default
`forceMount?`	`true`	-
`onInteractOutside?`	`((event: PointerDownOutsideEvent \| FocusOutsideEvent) => void)`	-
`onFocusOutside?`	`((event: FocusOutsideEvent) => void)`	-
`onPointerDownOutside?`	`((event: PointerDownOutsideEvent) => void)`	-
`onEscapeKeyDown?`	`((event: KeyboardEvent) => void)`	-
`loop?`	`boolean`	`false`
`updatePositionStrategy?`	`"always" \| "optimized"`	-
`hideWhenDetached?`	`boolean`	-
`sticky?`	`"partial" \| "always"`	-
`collisionPadding?`	`number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>`	-
`collisionBoundary?`	`Boundary \| Boundary[]`	-
`avoidCollisions?`	`boolean`	-
`arrowPadding?`	`number`	-
`alignOffset?`	`number`	-
`sideOffset?`	`number`	-
`asChild?`	`boolean`	-
`key?`	`Key \| null`	-
`ref?`	`Ref<HTMLDivElement>`	-

The Dropdown Menu component follows WAI-ARIA guidelines for menus: