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.jsonUsage
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
openWhether it's open, when controlled. Goes on DropdownMenu.
boolean
onOpenChangeCalled when it opens or closes. Goes on DropdownMenu.
(open: boolean) => void
alignHow the menu lines up with its trigger. Goes on DropdownMenuContent.
"start" | "center" | "end" = "center"
variantColors an item red, for actions like Delete. Goes on DropdownMenuItem.
"default" | "destructive" = "default"
Released under the MIT License.
More components
- CommandA command palette whose highlight glides between results as you move through them.
- CollapsibleA section that opens and closes by animating its height.
- Image LightboxA thumbnail that flies out to a larger view in the middle of the screen, over a lightly blurred page.
- Segmented ControlMutually exclusive options with a highlight that slides to the selected one.
See them in a real app
These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.