User Menu
ProAn avatar-triggered dropdown for account-level actions and navigation. Displays the user's avatar or initials as the trigger, which opens a floating menu containing the user's name and email, navigation links (Profile, Settings, Billing), and a sign-out action. Commonly placed in the top-right corner of the application header. Positioned below and aligned to the right edge of the trigger.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard user menu with avatar trigger, user info header, and grouped action items. | Use in the global header for account-related navigation and actions. |
| With Status | User menu trigger showing an online/away/busy status indicator on the avatar. | Use in collaboration tools where presence status matters. |
Usage Guidelines
Show the user's name and email in the menu header for identity confirmation.
Include non-account-related actions — keep the menu focused on user and account.
Group related items with separators — profile settings, team management, sign-out.
Hide the sign-out option behind a submenu — it must be directly accessible.
Place sign-out as the last item, visually separated from other actions.
Use a generic icon instead of the user's avatar for the trigger.
Use the avatar or initials as the trigger for instant recognition.
Open the user menu on hover — require a click for intentional interaction.
Code
Design Tokens
Accessibility
- Trigger button has aria-haspopup="true" and aria-expanded reflecting state.
- Uses role="menu" with role="menuitem" children, same as Dropdown Menu.
- Escape closes the menu and returns focus to the trigger.
- The avatar trigger must have aria-label="Account menu" or similar descriptive text.
- User info in the header should be marked up as presentational, not as menu items.