User Menu
component / auth / account
Avatar trigger with an account dropdown and a sign-out that shows its own progress.
- type
- component
- files
- 1
- registry deps
- avatar, button, dropdown-menu, skeleton
- npm deps
- lucide-react
installs
- components/automindz/user-menu.tsx
- Skeleton while the session resolves — no layout jump
- Sign-out keeps the menu open and shows its own progress
- Disabled entries explain themselves on hover
Pass user from your session. While it is undefined the component renders a skeleton, so there is no layout jump on load. Menu entries come from the items prop; a disabled entry can carry a disabledReason.
Variations
one state per section
Full trigger
Name, email and role in the trigger, for the bottom of a sidebar. Sign out keeps the menu open while the request runs.
Compact trigger
Avatar only, for a top bar. The accessible name still says whose account it is.
Session still resolving
user is undefined, so it renders a skeleton the same size as the real trigger — no layout jump when the session arrives.
Restricted entries
Entitlement-gated items stay in the menu, disabled, with the reason on hover. Hiding them just makes people ask where billing went.