Dropdown

children

ReactNode

Default: —

A DropdownTrigger and a DropdownMenu.

placement

"bottom-start" | "bottom-end" | "top-start" | ... (12-way)

Default: "bottom-start"

Menu position relative to the trigger.

offset

number

Default: 8

Distance from the trigger.

containerPadding

number

Default: 8

Minimum distance kept from the viewport edge.

shouldFlip

boolean

Default: true

Flips placement to stay in the viewport.

portalContainer

Element | DocumentFragment | null

Default: —

Custom portal mount target.

isOpen

boolean

Default: —

Controlled open state.

defaultOpen

boolean

Default: false

Uncontrolled initial open state.

isDismissable

boolean

Default: true

Allows dismissing via outside click/Escape.

isKeyboardDismissDisabled

boolean

Default: false

Disables closing via Escape.

shouldCloseOnInteractOutside

(target: Element) => boolean

Default: —

Custom predicate for outside-interaction dismissal.

closeOnSelect

boolean

Default: true

Closes the menu after an item is selected.

onOpenChange

(isOpen: boolean) => void

Default: —

Called when open state changes.

classNames

Partial<Record<"base" | "content", string>>

Default: —

Per-slot class overrides.

className

string

Default: —

Class applied to the root.

style

CSSProperties

Default: —

Inline styles for the root.

children

ReactElement

Default: —

The single element that opens the menu on press (required).

children

ReactNode | ((item: T) => ReactElement)

Default: —

Declarative DropdownItem/DropdownSection children, or a render function with items.

items

Iterable<T>

Default: —

Dynamic items, used with a render-function children.

topContent / bottomContent

ReactNode

Default: —

Content rendered above/below the item list.

emptyContent

ReactNode

Default: "No items."

Shown when there are no items.

variant

"solid" | "bordered" | "light" | "flat" | "faded" | "shadow"

Default: solid

Visual style variant.

color

DropdownColor

Default: default

Semantic color.

hideSelectedIcon

boolean

Default: false

Hides the selected-item checkmark.

selectionMode

"none" | "single" | "multiple"

Default: none

Item selection behavior.

selectedKeys

"all" | Iterable<Key>

Default: —

Controlled selected keys.

defaultSelectedKeys

"all" | Iterable<Key>

Default: —

Uncontrolled initial selected keys.

disabledKeys

Iterable<Key>

Default: —

Keys of items to disable.

disallowEmptySelection

boolean

Default: false

Prevents deselecting the last selected item.

autoFocus

boolean | "first" | "last"

Default: false

Focuses an item automatically when the menu opens.

hideEmptyContent

boolean

Default: false

Hides the empty-state content entirely.

shouldFocusWrap

boolean

Default: false

Wraps keyboard focus from the last item to the first.

closeOnSelect

boolean

Default: parent Dropdown's value

Per-menu override of the root's closeOnSelect.

virtualization

{ itemHeight: number; overscan?: number }

Default: —

Enables fixed-height virtualized rendering for long lists.

disableAnimation

boolean

Default: false

Disables the menu's open animation.

onAction

(key: Key) => void

Default: —

Called when an item is activated.

onSelectionChange

(keys) => void

Default: —

Called when selection changes.

onClose

() => void

Default: —

Called when the menu requests to close.

classNames

DropdownMenuClassNames

Default: —

Per-slot class overrides (base/list/emptyContent).

itemClasses

Partial<Record<DropdownItemSlot, string>>

Default: —

Per-slot class overrides applied to every item.

children / title

ReactNode

Default: —

Item label.

textValue

string

Default: —

Plain-text override for typeahead/accessible naming.

description

ReactNode

Default: —

Secondary text below the label.

shortcut

ReactNode

Default: —

Keyboard shortcut hint.

startContent / endContent

ReactNode

Default: —

Content rendered before/after the label.

selectedIcon

ReactNode

Default: —

Overrides the default selected checkmark.

submenuPlacement

DropdownPlacement

Default: "right-start"

Position of a nested DropdownMenu, when this item has one.

showDivider

boolean

Default: false

Shows a divider below this item.

href / target / rel / download

string

Default: —

Renders the item as a link when href is set.

isDisabled

boolean

Default: false

Disables this item.

isReadOnly

boolean

Default: false

Not selectable, but not visually disabled.

closeOnSelect

boolean

Default: —

Per-item override of the menu's closeOnSelect.

itemKey

Key

Default: —

Explicit key, when not using items+render-function.

onAction / onClose / onPress / onKeyDown / onClick

callback

Default: —

Interaction callbacks.