User Menu
New
A 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 |
Best Practices
Do
- ✓ Include user name and email for context
- ✓ Use clear icons for menu items
- ✓ Group related menu items (e.g., profile, settings, billing)
- ✓ Place sign out action at the bottom of the menu
- ✓ Include visual separation between action groups
Don't
- ✗ Don't hide critical account actions deep in submenus
- ✗ Don't use ambiguous labels for menu items
- ✗ Don't clutter the menu with too many options
- ✗ Don't forget to handle sign out confirmation for safety
- ✗ Don't use inconsistent icon styles
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