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

Last updated: 10/18/2025