DropdownMenu API

API reference docs for theDropdownMenucomponent. For examples and details on the usage of this component, visit the component demo page.

Props

Prop

Type

Description

Default

isDisabled?

boolean

Whether the dropdown menu is disabled.

false

children

((menuState: { isMenuOpen: boolean; triggerProps: TriggerProps<React.ElementType>; }) => React.ReactNode) | React.ReactNode

Accepts either a React node or a render function. The render function provides the menu's state (isMenuOpen) and accessibility/interaction props (triggerProps) for the trigger.

_

popoverMatchReferenceWidth?

boolean

Match the width of the popover with the reference element.

false

popoverMaxHeight?

number

The max height of the dropdown panel popover.

356

popoverMaxWidth?

number

The max width of the dropdown panel popover.

400

popoverOffset?

number

The offset of the dropdown panel popover.

4

popoverPlacement?

'bottom' | 'bottom-start' | 'bottom-end'

The placement of the dropdown panel popover relative to the dropdown menu trigger.

'bottom-start'

strategy?

'absolute' | 'fixed'

The strategy used to position the floating element.

'absolute'

mobilePopover?

object

Config options for responsive behavior of the dropdown menu.

_

mobilePopover?.mobileFriendly

boolean

Whether the dropdown menu should be mobile friendly

true

mobilePopover?.titleForMobile

string

The title of the mobile popover.

_

mobilePopover?.closeButtonPropsForMobile

{ label: string, onClick: () => void, size?: 'large' | 'standard' | 'small' }

Config options for the close button that appears on mobile.

_

mobilePopover?.togglePoint

number

The toggle point for the dropdown menu to switch to mobile view. Deprecated with backwards compatibility ⚠️ (The logic will be handled internally in future)

768