Components · Navigation
User Menu
The account menu at the right of the Suite Header — profile, preferences, and sign out.
Figma source: User Menu ↗Examples
User menu, open
Usage
The Figma annotation is specific and easy to lose in implementation: “Make sure that when the user menu is open, there should ALWAYS be 24px padding on the right side.” The trigger sits flush with the page edge; the open panel does not.
When to use it
- Keep 24px between the open menu and the right edge of the viewport.
- Put sign-out last, separated from the rest.
- Close on Escape, on outside click, and on selection.
- Keep the menu short — four or five items.
When not to use it
- Do not open it on hover.
- Do not put product navigation in it.
- Do not let the panel touch or overflow the viewport edge.
- Do not put destructive account actions here without confirmation.
Accessibility
- The trigger is a
<button>witharia-expandedandaria-controls. - Escape closes and returns focus to the trigger.
- Arrow keys move within the menu; Tab closes it and moves on.
- Where the name is hidden at narrow widths, keep an accessible name on the button — “Account menu, R. Alvarez”.
Tokens consumed
| Token | Applied to | Resolves to |
|---|---|---|
--menu-background | Panel surface | --color-white |
--menu-border | Panel border | --color-gray-300 |
--menu-hover | Item hover | --color-gray-200 |
--spacing-24 | Right offset when open | 24px |