Account Dropdown Menu

Navigation

About

A user account dropdown menu triggered by an avatar, with a profile label, grouped options, and a logout action.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Account Dropdown Menu to your project and fits it to your theme.

Code

How Account Dropdown Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}