SelectMenu API

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

Props

Props

Type

Description

Default

children

((menuState: { isMenuOpen: boolean; triggerProps: TriggerProps }) => ReactNode) | 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.

_

closeButtonPropsForMobile?

{ label: string, onClick: () => void, size?: IconButtonProps['size'] }

Props for the close button that appears on mobile.

_

mobileFriendly?

boolean

Whether the select menu should be mobile friendly.

true

titleForMobile?

string

The title of the Modal that appears on mobile instead of Popover.

_

togglePoint?

number

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

768

popoverMatchReferenceWidth?

boolean

Match the width of the popover with the reference element.

false

popoverMaxHeight?

number

The max height of the select menu popover.

356

popoverMaxWidth?

number

The max width of the select menu popover.

400

popoverOffset?

number

The offset of the select menu popover.

4

popoverPlacement?

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

The placement of the select menu popover in relation to the trigger.

'bottom-start'

selectedOption?

object

The currently selected option. This prop is deprecated and will be removed in future versions. A much better API will be used similar to FilterMenu.

_

strategy?

'absolute' | 'fixed'

The strategy used to position the floating element.

'absolute'