Beta
Animate UI

Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Made by imskyleen
Edit on GitHub

Installation

Usage

<DropdownMenu>
  <DropdownMenuTrigger>Open Dropdown Menu</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Item 1</DropdownMenuItem>
    <DropdownMenuItem>Item 2</DropdownMenuItem>
    <DropdownMenuItem>Item 3</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Checkboxes

Radio Group

Props

DocsAPI Reference

Animate UI props

PropTypeDefault
transition?
Transition
{ type: "spring", stiffness: 350, damping: 35 }
animateOnHover?
boolean
true
PropTypeDefault
inset?
boolean
false
PropTypeDefault
transition?
Transition
{ duration: 0.2 }
PropTypeDefault
variant?
'default' | 'destructive'
default
inset?
boolean
false
PropTypeDefault
inset?
boolean
false

Credits

  • We use Radix UI for the dropdown menu component.
  • We take our inspiration from Shadcn UI for the dropdown menu style.

Built by Skyleen. The source code is available on GitHub.

On this page