The DropdownMenu components can be composed to create flexible dropdown menus with different types of items.

DropdownMenu exports many components that combine to create a dropdown menu. The DropdownMenu.Trigger renders a <button> by default, but this can be overridden with the asChild prop, which will instead add all the functional and accessibility requirements to the child component instead (see the below example).

Also, note that the component must accept a ref.

Read more about the underlying UI component on the Radix UI documentation site.

<DropdownMenu>
<DropdownMenu.Trigger asChild>
<Button>Click me</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content sideOffset={16}>
<DropdownMenu.Item onClick={() => alert('Great clicking!')}>
Item 1
</DropdownMenu.Item>
<DropdownMenu.Item>Item 2</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.LinkItem href="/logout">Log Out</DropdownMenu.LinkItem>
</DropdownMenu.Content>
</DropdownMenu>

For any modifications of the default DropdownMenu visuals, we recommend utilising the Radix UI DropdownMenu component directly. You will need to wrap each exported component within a styled() function to enable the css prop.

API Reference

DropdownMenu

PropTypeDefaultRequired
dir
"ltr" | "rtl"

-

-

open
boolean

-

-

defaultOpen
boolean

-

-

onOpenChange
(open: boolean) => void

-

-

modal
boolean

-

-

cssCSSProperties

-

-

DropdownMenu.Trigger

PropTypeDefaultRequired
asChild
boolean

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-

DropdownMenu.Content

PropTypeDefaultRequired
asChild
boolean

-

-

side
"bottom" | "left" | "right" | "top"

-

-

sideOffset
number

-

-

align
"center" | "end" | "start"

-

-

alignOffset
number

-

-

arrowPadding
number

-

-

collisionBoundary
null | Element | Boundary[]

-

-

collisionPadding
number | Partial<Record<"bottom" | "left" | "right" | "top", number>>

-

-

sticky
"always" | "partial"

-

-

hideWhenDetached
boolean

-

-

avoidCollisions
boolean

-

-

onCloseAutoFocus
(event: Event) => void

-

-

loop
boolean

-

-

onEscapeKeyDown
(event: KeyboardEvent) => void

-

-

onPointerDownOutside
(event: PointerDownOutsideEvent) => void

-

-

onFocusOutside
(event: FocusOutsideEvent) => void

-

-

onInteractOutside
(event: PointerDownOutsideEvent | FocusOutsideEvent) => void

-

-

forceMount
true

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-

DropdownMenu.Item

PropTypeDefaultRequired
onSelect
(event: Event) => void

-

-

asChild
boolean

-

-

disabled
boolean

-

-

textValue
string

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-

DropdownMenu.Separator

PropTypeDefaultRequired
asChild
boolean

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-