A user account dropdown menu triggered by an avatar, with a profile label, grouped options, and a logout action.
import {
BoltIcon,
BookOpenIcon,
ChevronDownIcon,
Layers2Icon,
LogOutIcon,
PinIcon,
UserPenIcon,
} from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
export default function DropdownMenuDemo() {
return (
<div className="flex min-h-80 items-center justify-center gap-4 p-8">
<DropdownMenu defaultOpen>
<DropdownMenuTrigger asChild>
<Button className="h-auto p-0 hover:bg-transparent" variant="ghost">
<Avatar>
<AvatarImage
alt="Profile image"
src="https://i.pravatar.cc/150?img=80"
/>
<AvatarFallback>KK</AvatarFallback>
</Avatar>
<ChevronDownIcon
aria-hidden="true"
className="opacity-60"
size={16}
/>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-64"
side="right"
align="start"
sideOffset={8}
>
<DropdownMenuLabel className="flex min-w-0 flex-col">
<span className="text-foreground truncate text-sm font-medium">
Keith Kennedy
</span>
<span className="text-muted-foreground truncate text-xs font-normal">
k.kennedy@shadcnuikit.com
</span>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<BoltIcon aria-hidden="true" className="opacity-60" size={16} />
<span>Option 1</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Layers2Icon
aria-hidden="true"
className="opacity-60"
size={16}
/>
<span>Option 2</span>
</DropdownMenuItem>
<DropdownMenuItem>
<BookOpenIcon
aria-hidden="true"
className="opacity-60"
size={16}
/>
<span>Option 3</span>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<PinIcon aria-hidden="true" className="opacity-60" size={16} />
<span>Option 4</span>
</DropdownMenuItem>
<DropdownMenuItem>
<UserPenIcon
aria-hidden="true"
className="opacity-60"
size={16}
/>
<span>Option 5</span>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<LogOutIcon aria-hidden="true" className="opacity-60" size={16} />
<span>Logout</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}
Part of Bundui — browse the full library on 21st.dev.