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

With Highlight

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>

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

      <DropdownMenuSeparator />

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

      <DropdownMenuSeparator />

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

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

          <DropdownMenuSubContent>
            <DropdownMenuHighlightItem>
              <DropdownMenuItem>
                <span>Email</span>
              </DropdownMenuItem>
            </DropdownMenuHighlightItem>
            <DropdownMenuHighlightItem>
              <DropdownMenuItem>
                <span>Message</span>
              </DropdownMenuItem>
            </DropdownMenuHighlightItem>
            <DropdownMenuSeparator />
            <DropdownMenuHighlightItem>
              <DropdownMenuItem>
                <span>More...</span>
              </DropdownMenuItem>
            </DropdownMenuHighlightItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>

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

      <DropdownMenuSeparator />

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

Without Highlight

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

API Reference

Radix UI API Reference - DropdownMenu.Root Radix UI API Reference - DropdownMenu.Trigger Radix UI API Reference - DropdownMenu.Portal

The forceMount property is not supported in the DropdownMenuPortal component, as it is used for animation.

Radix UI API Reference - DropdownMenu.Content
PropTypeDefault
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 - Highlight
PropTypeDefault
transition?
Transition
{ type: "spring", stiffness: 350, damping: 35 }
animateOnHover?
boolean
true
Radix UI API Reference - DropdownMenu.Label Radix UI API Reference - DropdownMenu.Separator Radix UI API Reference - DropdownMenu.Group Radix UI API Reference - DropdownMenu.Item Radix UI API Reference - DropdownMenu.ItemIndicator Animate UI API Reference - HighlightItem Radix UI API Reference - DropdownMenu.CheckboxItem Radix UI API Reference - DropdownMenu.RadioGroup Radix UI API Reference - DropdownMenu.RadioItem
PropTypeDefault
...props?
React.ComponentProps<"span">
-
Radix UI API Reference - DropdownMenu.Sub Radix UI API Reference - DropdownMenu.SubTrigger Radix 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.