Overview
Foundations
Brand
Colors
Typography
Spacing & Layout
Semantic Tokens
Icons
Shadows
Components
Patterns
Design System
User Menu
The user menu is a dropdown triggered from the avatar in the header. It displays the user's identity (name, email, role), provides quick access to account-related actions, and includes a sign-out option. All colours adapt automatically between light and dark modes via semantic tokens.
Preview
The user menu dropdown displays user identity, account actions, and sign-out. In production, it is triggered from the avatar in the header. Toggle dark mode from the site header to see how all tokens adapt.
Mark Donelson
mark.donelson@useintegral.com
Specifications
Container
Width
240px
Border Radius
10px
Shadow (Light)
0 4px 12px rgba(0,0,0,0.2)
Shadow (Dark)
0 4px 12px rgba(0,0,0,0.4)
User Info
Avatar Size
56px
Name Font
16px / 500
Email Font
13px
Role Badge Padding
4px 12px
Role Badge Radius
12px
Menu Items
Menu Item Padding
10px 16px
Menu Icon Size
16px
Menu Item Gap
12px
Theming
The user menu uses shared tokens for backgrounds and text, plus component-specific tokens for the role badge and sign-out action. All values adapt between light and dark modes automatically.
Colors
Property
Token
Light
Dark
Background
--bg-card
white
gray.800
Border
--border
gray.200
gray.700
Name
--text
gray.900
gray.50
--text-muted
gray.500
gray.400
Menu Icon
--text-faint
gray.400
gray.600
Menu Text
--text
gray.900
gray.50
Divider
--border-light
gray.100
gray.800
Avatar
Property
Token
Light
Dark
Avatar BG
--avatar-bg
secondary.100
secondary.700
Avatar Text
--avatar-text
secondary.700
secondary.100
Role Badge
Property
Token
Light
Dark
Role Badge BG
--role-badge-bg
gray.100
gray.800
Role Badge Text
--role-badge-text
gray.700
gray.400
Menu Item States
Property
Token
Light
Dark
Hover BG
--bg-hover
gray.50
gray.700
Sign Out
--sign-out
red.600
red.500
Sign Out Hover BG
--sign-out-hover
red.50
red.900
Focus Ring
--focus-ring
brand.600
brand.600
Best Practices
Do
Anchor the menu to the avatar so users understand the trigger
Show the user's name, email, and role to confirm identity
Visually separate Sign out from other menu items with a divider
Close the menu when clicking outside or pressing Escape
Don't
Don't place too many items in the menu — keep it focused on account actions
Don't style Sign out the same as other items — its destructive nature should be visually distinct
Don't hardcode colours — use semantic tokens for automatic theme support
Don't omit the role badge — it provides important context about permissions
Accessibility
ARIA Roles
The avatar trigger should have aria-haspopup="true" and aria-expanded reflecting the menu state. The dropdown should use role="menu" with role="menuitem" on each action.
Keyboard Navigation
Support Enter/Space to open the menu from the avatar. Arrow keys should navigate between menu items. Enter activates the focused item, and Escape closes the menu and returns focus to the avatar.
Focus Management
When the menu opens, move focus to the first menu item. When it closes, return focus to the avatar trigger. Ensure all items have visible focus indicators using the --focus-ring token.