Toucan

Add it to your project

Eject the complete dropdown-menu group, then import from its generated local barrel. The copied source and CSS belong to your application.

bash

pnpm exec toucan eject dropdown-menu

bash

npx toucan eject dropdown-menu

app.tsx

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/toucan/dropdown-menu';

Use when

A compact trigger reveals a list of actions or navigation choices.

Avoid when

Users are selecting a form value; use Select.

Example

API reference

Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.

DropdownMenuDropdownMenuContentDropdownMenuItemDropdownMenuLabelDropdownMenuSeparatorDropdownMenuTrigger

DropdownMenu

Props type: DropdownMenuProps

Name	Type	Default	Required	Description
`anchor`	`"left" \| "right" \| "top" \| "bottom" \| "top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right" \| "left-top" \| "left-center" \| "left-bottom" \| "right-top" \| "right-center" \| "right-bottom"`	`'bottom'`	No	The edge or alignment used to position the floating content.
`defaultOpen`	`boolean`	`false`	No	Initial open state when the component is uncontrolled.
`onOpenChange`	`(open: boolean) => void`	`undefined`	No	Called when the open state changes.
`open`	`boolean`	`undefined`	No	Controlled open state.

Also accepts the native div attributes that are not replaced by a Toucan prop.

DropdownMenuContent

Props type: DropdownMenuContentProps

No Toucan-specific props.

Also accepts the native div attributes that are not replaced by a Toucan prop.

DropdownMenuItem

Props type: DropdownMenuItemProps

Name	Type	Default	Required	Description
`asChild`	`boolean`	`false`	No	Merge behavior and accessibility props onto the single child element.
`disabled`	`boolean`	`false`	No	Prevents interaction when true.
`onSelect`	`() => void`	`undefined`	No	Called when the item is selected.

Also accepts the native div attributes that are not replaced by a Toucan prop.

DropdownMenuLabel

Props type: DropdownMenuLabelProps

No Toucan-specific props.

Also accepts the native div attributes that are not replaced by a Toucan prop.

DropdownMenuSeparator

Props type: DropdownMenuSeparatorProps

No Toucan-specific props.

Also accepts the native div attributes that are not replaced by a Toucan prop.

DropdownMenuTrigger

Props type: DropdownMenuTriggerProps

Name	Type	Default	Required	Description
`asChild`	`boolean`	`false`	No	Merge behavior and accessibility props onto the single child element.

Also accepts the native button attributes that are not replaced by a Toucan prop.

Type exports

DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuSeparatorProps, DropdownMenuTriggerProps

Accessibility

Implements menu, menuitem, trigger, arrow-key, Home/End, Escape, and focus-return behavior.

Token families

dropdownfocus

Related components