User Menu Dropdown

Component

About

A clean, animated dropdown for user account actions. Triggered by an avatar or name, it includes items like "Profile", "Settings", and "Logout". Supports dark mode, keyboard navigation, and smooth framer-motion transitions for a modern UX. Fully customizable and production-ready.

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

Code

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

Usage.tsx

"use client";

import React from "react";
import { UserMenuDropdown, UserMenuItem } from "@/components/ui/user-menu-dropdown";
import { User, Settings, LogOut, Crown } from "lucide-react";

export default function UserMenuDemo() {
  const userMenuItems: UserMenuItem[] = [
    {
      value: "profile",
      label: "Profile",
      icon: <User className="h-4 w-4" />,
      onClick: () => console.log("Profile clicked"),
    },
    {
      value: "settings",
      label: "Settings",
      icon: <Settings className="h-4 w-4" />,
      onClick: () => console.log("Settings clicked"),
    },
    {
      value: "billing",
      label: "Billing & Plans",
      icon: <Crown className="h-4 w-4" />,
      onClick: () => console.log("Billing clicked"),
      divider: true,
    },
    {
      value: "logout",
      label: "Log out",
      icon: <LogOut className="h-4 w-4" />,
      onClick: () => console.log("Logout clicked"),
    },
  ];

  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-8">
      <UserMenuDropdown
        trigger={
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
              <span className="text-sm font-medium text-white">JD</span>
            </div>
            <span className="font-medium">John Doe</span>
          </div>
        }
        items={userMenuItems}
        position="bottom-left"
      />
    </div>
  );
}