Dropdown Menu

defaultOpen

boolean

The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.

open

boolean

The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.

onOpenChange

function (open: boolean) => void

Event handler called when the open state of the dropdown menu changes.

modal

boolean

The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.

asChild

boolean

false

Change the default rendered element for the one passed as a child, merging their props and behavior.

forceMount

boolean

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. If used on this part, it will be inherited by DropdownMenuContent and DropdownMenuSubContent respectively.

container

HTMLElement

document.body

Specify a container element to portal the content into.

loop

boolean

false

When true, keyboard navigation will loop from last item to first, and vice versa.

onCloseAutoFocus

function (event: Event) => void

Event handler called when focus moves back after closing. It can be prevented by calling event.preventDefault.

onEscapeKeyDown

function (event: KeyboardEvent) => void

Event handler called when the escape key is down. It can be prevented by calling event.preventDefault

onPointerDownOutside

function (event: PointerDownOutsideEvent) => void

Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.

onFocusOutside

function (event: FocusOutsideEvent) => void

Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.

onInteractOutside

function (event: PointerDownOutsideEvent | FocusOutsideEvent) => void

Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.

forceMount

boolean

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from DropdownMenuPortal

side

enum

bottom ("top" | "right" | "bottom" | "left")

The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.

sideOffset

number

0

The distance in pixels from the trigger.

align

enum

center ("start" | "center" | "end")

The distance in pixels from the trigger.

alignOffset

number

0

The vertical distance in pixels from the anchor.

avoidCollisions

boolean

true

When true, overrides the side andalign preferences to prevent collisions with boundary edges.

collisionBoundary

Boundary (Element | null | Array<Element | null>)

[]

The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.

collisionPadding

number | Padding number | Partial<Record<Side, number>>

0

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.

sticky

enum "partial" | "always"

"partial"

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.

hideWhenDetached

boolean

false

Whether to hide the content when the trigger becomes fully occluded.

disabled

boolean

false

When true, prevents the user from interacting with the item.

onSelect

function (event: Event) => void

Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the dropdown menu from closing when selecting that item.

textValue

string

Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.

checked

boolean | 'indeterminate'

The controlled checked state of the item. Must be used in conjunction with onCheckedChange.

onCheckedChange

function (checked: boolean) => void

Event handler called when the checked state changes.

disabled

boolean

When true, prevents the user from interacting with the item.

onSelect

function (event: Event) => void

Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the dropdown menu from closing when selecting that item.

textValue

string

Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.

value

string

The value of the selected item in the group.

onValueChange

function (value: string) => void

Event handler called when the value changes.

value*

string

The value of the selected item in the group.

disabled

boolean

When true, prevents the user from interacting with the item.

onSelect

function (event: Event) => void

Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the dropdown menu from closing when selecting that item.

textValue

string

Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.

defaultOpen

boolean

The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.

open

boolean

The controlled open state of the submenu. Must be used in conjunction with onOpenChange.

onOpenChange

function (open: boolean) => void

Event handler called when the open state of the submenu changes.

disabled

boolean

false

When true, prevents the user from interacting with the item.

textValue

string

false

Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.

loop

boolean

false

When true, keyboard navigation will loop from last item to first, and vice versa.

onEscapeKeyDown

function (event: KeyboardEvent) => void

Event handler called when the escape key is down. It can be prevented by calling event.preventDefault

onPointerDownOutside

function (event: PointerDownOutsideEvent) => void

Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.

onFocusOutside

function (event: FocusOutsideEvent) => void

Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.

onInteractOutside

function (event: PointerDownOutsideEvent | FocusOutsideEvent) => void

Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.

forceMount

boolean

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from DropdownMenuPortal

sideOffset

number

0

The distance in pixels from the trigger.

alignOffset

number

0

The vertical distance in pixels from the anchor.

avoidCollisions

boolean

true

When true, overrides the side andalign preferences to prevent collisions with boundary edges.

collisionBoundary

Boundary (Element | null | Array<Element | null>)

[]

The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.

collisionPadding

number | Padding number | Partial<Record<Side, number>>

0

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.

sticky

enum "partial" | "always"

"partial"

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.

hideWhenDetached

boolean

false

Whether to hide the content when the trigger becomes fully occluded.