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 |