All components
Chewypixel component

Dropdown Menu

A frosted menu that scales out of its trigger and animates out when it closes.

Installation

npx shadcn@latest add https://chewypixel.io/r/dropdown-menu.json

Usage

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function WorkspaceMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Options</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-48">
        <DropdownMenuLabel>Gumdrop</DropdownMenuLabel>
        <DropdownMenuItem>Rename</DropdownMenuItem>
        <DropdownMenuItem>Duplicate</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Props

open

Whether it's open, when controlled. Goes on DropdownMenu.

boolean

onOpenChange

Called when it opens or closes. Goes on DropdownMenu.

(open: boolean) => void

align

How the menu lines up with its trigger. Goes on DropdownMenuContent.

"start" | "center" | "end" = "center"

variant

Colors an item red, for actions like Delete. Goes on DropdownMenuItem.

"default" | "destructive" = "default"

Released under the MIT License.

More components

See them in a real app

These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.