Components
Loading preview...
A versatile dropdown menu component with animations, multiple variants, and full accessibility support.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/dropdown-menuimport {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuGroup,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import {
User,
CreditCard,
Settings,
Keyboard,
Users,
UserPlus,
Mail,
MessageSquare,
PlusCircle,
Plus,
Github,
LifeBuoy,
Cloud,
LogOut
} from "lucide-react";
export default function DemoOne() {
return (
<>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">Open Menu</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuLabel icon={User}>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem icon={User} shortcut="⇧⌘P">
Profile
</DropdownMenuItem>
<DropdownMenuItem icon={CreditCard} shortcut="⌘B">
Billing
</DropdownMenuItem>
<DropdownMenuItem icon={Settings} shortcut="⌘S">
Settings
</DropdownMenuItem>
<DropdownMenuItem icon={Keyboard} shortcut="⌘K">
Keyboard shortcuts
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem icon={Users}>Team</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger icon={UserPlus}>
Invite users
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem icon={Mail}>Email</DropdownMenuItem>
<DropdownMenuItem icon={MessageSquare}>Message</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem icon={PlusCircle}>More...</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuItem icon={Plus} shortcut="⌘+T">
New Team
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem icon={Github}>GitHub</DropdownMenuItem>
<DropdownMenuItem icon={LifeBuoy}>Support</DropdownMenuItem>
<DropdownMenuItem disabled icon={Cloud}>
API
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem icon={LogOut} variant="destructive" shortcut="⇧⌘Q">
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</>
)
}