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
Open in

Installation

Usage

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>

  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>

    <DropdownMenuSeparator />

    <DropdownMenuGroup>
      <DropdownMenuItem>
        <span>Profile</span>
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <span>Billing</span>
        <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <span>Settings</span>
        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <span>Keyboard shortcuts</span>
        <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>

    <DropdownMenuSeparator />

    <DropdownMenuGroup>
      <DropdownMenuItem>
        <span>Team</span>
      </DropdownMenuItem>

      <DropdownMenuSub>
        <DropdownMenuSubTrigger>
          <span>Invite users</span>
          <ChevronRight />
        </DropdownMenuSubTrigger>

        <DropdownMenuSubContent>
          <DropdownMenuItem>
            <span>Email</span>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <span>Message</span>
          </DropdownMenuItem>

          <DropdownMenuSeparator />

          <DropdownMenuItem>
            <span>More...</span>
          </DropdownMenuItem>
        </DropdownMenuSubContent>
      </DropdownMenuSub>

      <DropdownMenuItem>
        <span>New Team</span>
        <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>

    <DropdownMenuSeparator />

    <DropdownMenuItem>
      <span>Log out</span>
      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Open in
Open in

API Reference

Animate UI API Reference - DropdownMenu PrimitiveRadix UI API Reference - DropdownMenu.Root
Animate UI API Reference - DropdownMenuTrigger PrimitiveRadix UI API Reference - DropdownMenu.Trigger
Animate UI API Reference - DropdownMenuContent PrimitiveRadix UI API Reference - DropdownMenu.Content
PropTypeDefault
sideOffset?
number
4
container?
HTMLElement
document.body
transition?
Transition
{ duration: 0.2 }
...props?
HTMLMotionProps<"div">
-

The forceMount and asChild properties are not supported in the DropdownMenuContent component, as it is used for animation.

Animate UI API Reference - DropdownMenuLabel PrimitiveRadix UI API Reference - DropdownMenu.Label
Animate UI API Reference - DropdownMenuSeparator PrimitiveRadix UI API Reference - DropdownMenu.Separator
Animate UI API Reference - DropdownMenuHighlight PrimitiveRadix UI API Reference - DropdownMenu.Group
Animate UI API Reference - DropdownMenuItem PrimitiveRadix UI API Reference - DropdownMenu.Item
PropTypeDefault
variant?
0
default
inset?
boolean
-
Animate UI API Reference - DropdownMenuItemIndicator PrimitiveRadix UI API Reference - DropdownMenu.ItemIndicator
Animate UI API Reference - DropdownMenuCheckboxItem PrimitiveRadix UI API Reference - DropdownMenu.CheckboxItem
Animate UI API Reference - DropdownMenuRadioGroup PrimitiveRadix UI API Reference - DropdownMenu.RadioGroup
Animate UI API Reference - DropdownMenuRadioItem PrimitiveRadix UI API Reference - DropdownMenu.RadioItem
Animate UI API Reference - DropdownMenuShortcut Primitive
PropTypeDefault
...props?
React.ComponentProps<"span">
-
Animate UI API Reference - DropdownMenuSub PrimitiveRadix UI API Reference - DropdownMenu.Sub
Animate UI API Reference - DropdownMenuSubTrigger PrimitiveRadix UI API Reference - DropdownMenu.SubTrigger
Animate UI API Reference - DropdownMenuSubContent PrimitiveRadix UI API Reference - DropdownMenu.SubContent
PropTypeDefault
transition?
Transition
{ duration: 0.2 }
...props?
HTMLMotionProps<"div">
-

The forceMount and asChild properties are not supported in the DropdownMenuSubContent component, as it is used for animation.

Credits

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

Last updated: 10/18/2025