User Menu
Account dropdown built from Avatar and Dropdown Menu.
Installation
npx paubha@latest add user-menuUsage
import { UserMenu, UserMenuDivider } from "@/components/ui/user-menu";
import { Avatar } from "@/components/ui/avatar";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { LogOut, Settings, User } from "lucide-react";
<UserMenu
avatar={<Avatar initials="SL" alt="Sofia Lindqvist" size="md" />}
name="Sofia Lindqvist"
email="sofia@example.com"
>
<DropdownMenuItem leadingIcon={<User />}>Profile</DropdownMenuItem>
<DropdownMenuItem leadingIcon={<Settings />}>Settings</DropdownMenuItem>
<UserMenuDivider />
<DropdownMenuItem leadingIcon={<LogOut />}>Sign out</DropdownMenuItem>
</UserMenu>Props
| Prop | Type | Description |
|---|---|---|
avatar | ReactNode | Avatar shown in the 48px trigger. |
label | string | Accessible name for the trigger. |
name | ReactNode | Account name in the menu header. |
email | ReactNode | Email under the name. |
disabled | boolean | Disables the trigger; avatar dims to 35%. |