User Profile Dropdown
Navigation
Block
Complete user profile dropdown with avatar, account info, and actions.
Built With
3 componentsThis block uses the following UI components from the design system:
Preview
User profile dropdown with avatar and menu items
JV
Jens van der Berg
jens@example.com
Pro
With Custom Items
Customize user info, menu items, and callbacks
JV
Jens van der Berg
jens@example.com
Pro
Props
Component API reference
UserProfileDropdown
| Prop | Type | Default | Description |
|---|---|---|---|
user | UserInfo | — | User information (optional, has defaults) |
menuItems | MenuItem[] | — | Primary menu items (optional, has defaults) |
secondaryItems | MenuItem[] | — | Secondary menu items like help and docs |
showSignOut | boolean | true | Show sign out button |
onSignOut | () => void | — | Callback when sign out is clicked |
className | string | — | Additional CSS classes |
UserInfo Type
interface UserInfo {
name: string // User's full name
email: string // User's email address
avatar?: string // Avatar image URL (optional)
initials?: string // User initials (fallback)
plan?: string // Plan badge (e.g., 'Pro')
}
MenuItem Type
interface MenuItem {
icon: LucideIcon // Icon component
label: string // Menu item label
badge?: number | string // Badge count or text
onClick?: () => void // Click handler
}
Usage
Import and implementation examples
import { UserProfileDropdown } from '@/blocks/navigation/user-profile-dropdown'import { User, Settings, Sparkles, Bell } from 'lucide-react'
// Basic usage with defaults<UserProfileDropdown />
// With custom user info<UserProfileDropdown user={{ name: 'John Doe', email: 'john@example.com', initials: 'JD', plan: 'Enterprise' }}/>
// With custom menu itemsconst menuItems = [ { icon: User, label: 'Profile', onClick: () => navigate('/profile') }, { icon: Settings, label: 'Settings', onClick: () => navigate('/settings') }, { icon: Sparkles, label: 'Subscription', onClick: () => navigate('/billing') }, { icon: Bell, label: 'Notifications', badge: 5, onClick: () => navigate('/notifications') }]
<UserProfileDropdown user={user} menuItems={menuItems} onSignOut={() => handleSignOut()}/>
// With avatar image<UserProfileDropdown user={{ name: 'Sarah Johnson', email: 'sarah@example.com', avatar: '/images/avatars/sarah.jpg', plan: 'Pro' }}/>
// Without sign out button<UserProfileDropdown showSignOut={false} />Features
Built-in functionality
- User info header: Avatar and email display
- Plan badges: Pro, Free, Enterprise labels
- Primary menu items: Profile, Settings, Subscription
- Secondary menu section: Help and documentation links
- Sign out button: Danger state styling
- Badge support: Notification counts on items
- Gradient avatar: Initials or image support
- Click handlers: Callbacks for all menu items
- Hover states: Smooth transitions
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="menu" for dropdownrole="menuitem" for itemsaria-haspopup on trigger buttonaria-expanded for dropdown stateKeyboard Navigation
| Key | Action |
|---|---|
| Enter/Space | Open dropdown / Activate item |
| Escape | Close dropdown |
| Arrow Up/Down | Navigate items |
| Tab | Move to next item |
Notes
- Focus trapped within open dropdown
- Screen reader announces user info
- Badges announced with item labels