Docs / Components / Avatar Dropdown
Avatar Dropdown
A sleek, dark-themed avatar dropdown component with smooth spring animations, hover indicators, submenus, and custom user status.
Click on Avatar to open the dropdown menu
Dependencies
Install the following dependencies to use this component:
1npm install motion lucide-react clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add avatar-dropdown
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| user | { name?: string; email?: string; avatarUrl?: string; initials?: string; status?: 'online' | 'offline' | 'away' } | Default User Object | User details including avatar image URL and online status. |
| items | MenuItem[] | DEFAULT_ITEMS | Array of menu item objects with icons, labels, shortcuts, badges, or danger flags. |
| align | 'left' | 'right' | 'right' | Alignment origin for dropdown menu. |
| onSelect | (itemId: string) => void | undefined | Callback triggered when a menu item is clicked. |
| className | string | '' | Additional wrapper CSS classes. |
| dropdownClassName | string | '' | Additional dropdown menu card CSS classes. |