User Profile Dropdown
A complete account menu block built on DropdownMenu — avatar header, plan badge, primary actions, and sign out.
Preview
Default user profile dropdown with primary, secondary, and sign-out sections
Jens van der Berg
jens@example.com
Plan Tiers
Badge the plan beside the user's name — Pro, Enterprise, or hide entirely for Free
Alex Kim
alex@example.com
Jens van der Berg
jens@example.com
Sarah Johnson
sarah@acme.com
With Notification Badges
Menu items can surface counts — useful for notifications or pending actions
Jens van der Berg
jens@example.com
Custom Items
Override primary and secondary items entirely with your own icons, labels, and handlers
Jens van der Berg
jens@example.com
Minimal
Hide secondary items and sign-out for a compact account card
Jens van der Berg
jens@example.com
Props
Component API reference
UserProfileDropdown
| Prop | Type | Default | Description |
|---|---|---|---|
user | UserInfo | — | User information (name, email, avatar, plan) |
menuItems | MenuItem[] | — | Primary menu items — Profile, Settings, etc. |
secondaryItems | MenuItem[] | — | Secondary items like Help and Docs |
showSignOut | boolean | true | Show the destructive sign-out row |
onSignOut | () => void | — | Callback when sign out is clicked |
className | string | — | Additional CSS classes on the container |
UserInfo
| Prop | Type | Default | Description |
|---|---|---|---|
name* | string | — | User's full name |
email* | string | — | User's email address |
avatar | string | — | Avatar image URL |
initials | string | — | Fallback initials when no avatar |
plan | string | — | Badge label beside name — e.g. 'Pro' |
MenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
icon* | LucideIcon | — | Icon component rendered at the start |
label* | string | — | Item label |
badge | number | string | — | Optional count or tag rendered at the end |
onClick | () => void | — | Click handler |
Usage
Import and implementation examples
import { UserProfileDropdown } from '@/blocks/navigation/user-profile-dropdown'import { User, Settings, CreditCard, Bell } from 'lucide-react'
// Default<UserProfileDropdown />
// With a Pro user<UserProfileDropdown user={{ name: 'Jens van der Berg', email: 'jens@example.com', initials: 'JV', plan: 'Pro', }}/>
// With custom menu items and notification badgeconst menuItems = [ { icon: User, label: 'Profile', onClick: () => router.push('/profile') }, { icon: Settings, label: 'Settings', onClick: () => router.push('/settings') }, { icon: CreditCard, label: 'Billing', onClick: () => router.push('/billing') }, { icon: Bell, label: 'Notifications', badge: 12 },]
<UserProfileDropdown user={user} menuItems={menuItems} onSignOut={() => signOut()}/>
// Minimal — no secondary items or sign-out<UserProfileDropdown user={user} secondaryItems={[]} showSignOut={false}/>Built With
4 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- User header: Avatar, name, email, and plan badge
- Plan badges: Highlight Pro, Enterprise, or custom tiers
- Primary menu: Profile, Settings, Billing, Notifications
- Secondary section: Help, docs, or any supporting links
- Notification badges: Inline counts on any menu item
- Destructive sign-out: Dedicated danger-styled row
- Gradient avatar fallback: Initials rendered on indigo-to-teal
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Built on DropdownMenu with role="menu"Each item uses role="menuitem"aria-haspopup on the triggeraria-expanded reflects open stateKeyboard Navigation
| Key | Action |
|---|---|
| Enter/Space | Open dropdown / activate item |
| Escape | Close dropdown |
| Arrow Up/Down | Navigate items |
| Tab | Move to next focusable element |
Notes
- Focus is trapped within the open dropdown
- Screen reader announces user name, email, and plan
- Badge counts are announced with item labels