dropdown-menu
amarjay-ui/dropdown-menuFreeComponent
Menu of actions triggered by a button.
Live preview
live · rendered by the registry
Rendered by amarjay-ui on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://ui.amarjay.com/r/dropdown-menu.jsonSource
1"use client"23import * as React from "react"4import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"56import { cn } from "@/lib/utils"7import { CheckIcon, ChevronRightIcon } from "lucide-react"89function DropdownMenu({10 ...props11}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {12 return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />13}1415function DropdownMenuPortal({16 ...props17}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {18 return (19 <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />20 )21}2223function DropdownMenuTrigger({24 ...props25}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {26 return (27 <DropdownMenuPrimitive.Trigger28 data-slot="dropdown-menu-trigger"29 {...props}30 />31 )32}3334function DropdownMenuContent({35 className,36 align = "start",37 sideOffset = 4,38 ...props39}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {40 return (41 <DropdownMenuPrimitive.Portal>42 <DropdownMenuPrimitive.Content43 data-slot="dropdown-menu-content"44 sideOffset={sideOffset}45 align={align}46 className={cn(47 "dark z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!",48 className49// … truncated
What it pulls in
npm packages
Other registry items
Files it writes
More from amarjay-ui
All 18 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| alertalert | amarjay-ui | Components | Free | 1 dep | |
| avataravatar | amarjay-ui | Components | Free | 1 dep | |
| badgebadge | amarjay-ui | Components | Free | 2 deps | |
| buttonbutton | amarjay-ui | Components | Free | 2 deps | |
| cardcard | amarjay-ui | Components | Free | no deps | |
| chartchart | amarjay-ui | Components | Free | 1 dep | |
| context-menucontext-menu | amarjay-ui | Components | Free | 2 deps | |
| dialogdialog | amarjay-ui | Components | Free | 2 deps |
