Dropdown Menu

Stable

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

Examples

Basic Usage

tsx
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>
        <User className="mr-2 h-4 w-4" />
        <span>Profile</span>
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <Settings className="mr-2 h-4 w-4" />
        <span>Settings</span>
        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-rose-400 focus:text-rose-300 focus:bg-rose-500/10">
      <LogOut className="mr-2 h-4 w-4" />
      <span>Log out</span>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Neon Variant

tsx
<DropdownMenuContent variant="neon">
  <DropdownMenuLabel variant="neon">SYSTEM</DropdownMenuLabel>
  <DropdownMenuSeparator variant="neon" />
  <DropdownMenuItem variant="neon">Start Core</DropdownMenuItem>
  <DropdownMenuSub>
    <DropdownMenuSubTrigger variant="neon">Modules</DropdownMenuSubTrigger>
    <DropdownMenuSubContent variant="neon">
      <DropdownMenuItem variant="neon">Alpha</DropdownMenuItem>
    </DropdownMenuSubContent>
  </DropdownMenuSub>
</DropdownMenuContent>

API Reference

PropertyDescriptionTypeDefault
variantVisual style for Content, Item, Label, Separator, etc."default" | "neon" | "glass"-