Dropdown Menu

View source Report an issue

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>

With groups

<DropdownMenu>
  <DropdownMenu.Trigger asChild>
    <Button>Click me</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content sideOffset={16}>
    <DropdownMenu.Group>
      <DropdownMenu.Label>Fruits</DropdownMenu.Label>
      <DropdownMenu.Item>Apple</DropdownMenu.Item>
      <DropdownMenu.Item>Banana</DropdownMenu.Item>
    </DropdownMenu.Group>
    <DropdownMenu.Separator />
    <DropdownMenu.Group>
      <DropdownMenu.Label>Vegetables</DropdownMenu.Label>
      <DropdownMenu.Item>Carrot</DropdownMenu.Item>
      <DropdownMenu.Item>Broccoli</DropdownMenu.Item>
    </DropdownMenu.Group>
  </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 className prop.

API Reference

DropdownMenu

Prop	Type	Default	Required
`defaultOpen`	`boolean`	-	-
`dir`	`"ltr"` \| `"rtl"`	-	-
`modal`	`boolean`	-	-
`onOpenChange`	`(open: boolean) => void`	-	-
`open`	`boolean`	-	-

DropdownMenu.Trigger

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-

DropdownMenu.Content

Prop	Type	Default	Required
`align`	`"center"` \| `"start"` \| `"end"`	-	-
`alignOffset`	`number`	-	-
`arrowPadding`	`number`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`avoidCollisions`	`boolean`	-	-
`collisionBoundary`	`null` \| `Element` \| `Boundary[]`	-	-
`collisionPadding`	`number` \| `Partial<Record<"left" \| "right" \| "top" \| "bottom", number>>`	-	-
`forceMount`	`true`	-	-
`hideWhenDetached`	`boolean`	-	-
`loop`	`boolean`	-	-
`onCloseAutoFocus`	`(event: Event) => void`	-	-
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	-	-
`onFocusOutside`	`(event: FocusOutsideEvent) => void`	-	-
`onInteractOutside`	`(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void`	-	-
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`	-	-
`side`	`"left"` \| `"right"` \| `"top"` \| `"bottom"`	-	-
`sideOffset`	`number`	-	-
`sticky`	`"partial"` \| `"always"`	-	-
`updatePositionStrategy`	`"always"` \| `"optimized"`	-	-

DropdownMenu.Item

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`disabled`	`boolean`	-	-
`onSelect`	`(event: Event) => void`	-	-
`textValue`	`string`	-	-

DropdownMenu.Label

Prop	Type	Default	Required
`asChild`	`boolean`	-	-

DropdownMenu.Separator

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-