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
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
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.