Search

Search components and blocks

Sign in

Dropdown Menu

Content blurs and springs into place with items staggering in right behind it, instead of a flat fade — the pattern behind the sidebar's account menu and every 'model' picker in the AI components.

pnpm dlx shadcn@latest add @ditherui/dropdown-menu

Install

$ pnpm dlx shadcn@latest add @ditherui/dropdown-menu

Props

openboolean—
onOpenChange(open: boolean) => void—
align"start" | "center" | "end""start"
sideOffsetnumber4

Morph Dropdown Menu

Pro

A dropdown menu where the trigger itself morphs into the menu. A single surface grows from the button's own size to the full menu in width and height, with the trigger row staying put on top. Items stagger in, a highlight glides between them, and arrow keys, Enter and Escape work from the trigger. The demo is an account menu with a profile header and a destructive Log out.

pnpm dlx shadcn@latest add @ditherui/morph-dropdown-menu

Open the menu and pick something.

Props

items{ value: string; label: string; icon?: ReactNode; shortcut?: string; destructive?: boolean; separatorBefore?: boolean; onSelect?: () => void }[]—
triggerReactNode—
headerReactNode—
openWidthnumber264
openboolean—
defaultOpenbooleanfalse
onOpenChange(open: boolean) => void—
align"start" | "end""start"
classNamestring—

When to use the dropdown menu

Use the dropdown menu for actions and pickers. Content blurs and springs into place with items staggering in behind it.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components