User Menu
NewA dropdown menu triggered by a user avatar, displaying profile information and action items. Perfect for application headers and navigation bars.
Preview
Features
Avatar Display
Shows user avatar with automatic fallback to initials
User Info
Displays user name and email in the dropdown
Flexible Actions
Customizable menu items with callback handlers
RTL Support
Automatically adapts icons and layout for RTL
Keyboard Navigation
Full keyboard support with arrow keys
Accessible
ARIA labels and screen reader support
Examples
With Avatar
tsx
Minimal
tsx
All Options
tsx
Integration Example
Using with Authentication
Example integration with authentication system
tsx
Props
| Name | Type | Default | Description |
|---|---|---|---|
user | { name?: string; email?: string; image?: string; initials?: string } | — | User information to display |
onProfileClick | () => void | — | Callback when Profile menu item is clicked |
onSettingsClick | () => void | — | Callback when Settings menu item is clicked |
onBillingClick | () => void | — | Callback when Billing menu item is clicked |
onTeamClick | () => void | — | Callback when Team menu item is clicked |
onSupportClick | () => void | — | Callback when Support menu item is clicked |
onLogout | () => void | — | Callback when Log out menu item is clicked |
className | string | — | Additional CSS classes for the trigger button |
align | 'start' | 'center' | 'end' | — | Alignment of the dropdown menu |
side | 'top' | 'right' | 'bottom' | 'left' | — | Side where the dropdown menu appears |
Accessibility
- ✓Keyboard navigation with Tab, Enter, and Arrow keys
- ✓ARIA labels for screen readers
- ✓Focus management within the dropdown
- ✓Escape key closes the dropdown
- ✓Visual focus indicators for all interactive elements
Use Cases
Header profile dropdown
Account settings quick access
Logout and session controls
Theme and language preferences