UserMenu
The signed-in account, its preferences and actions in a menu; authentication stays in your app.
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add user-menuDependencies
What add user-menu installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils@zuno/avatar@zuno/dropdown-menu
Examples
2 examples · 1 componentIn a sidebar footer
The full trigger with name and email; the menu holds account links and Sign out.
Compact, in a top bar
Only the avatar; the button is named "Account menu for Luis Gómez".
API reference
Forwards props and ref to the container element; it only adds composition utilities.
| Prop | Type | Default |
|---|---|---|
UserMenuDropdownMenu's root: open, onOpenChange and modal. | Menu.Root | — |
UserMenuTriggerAvatar, name and email. compact shows only the avatar and names the button with label, by default "Account menu for <name>". | { user; compact?; label?; className? } | compact: false |
userWithout image, or while it loads, the avatar shows the initials of name. | { name: string; email?: string; image?: string } | — |
UserMenuContentDropdownMenuContent, 15 rem wide. Pass align="end" when the trigger sits at the right edge. | Menu.Popup | — |
UserMenuHeaderWho is signed in, at the top. Not an item: arrow keys skip it. | { user; children? } | — |
UserMenuItem / UserMenuGroup / UserMenuSeparatorDropdownMenu's parts, under names that read well here. | Menu.Item / Menu.Group / Menu.Separator | — |
States
The states that apply to this component and their visual treatment.
| State | Treatment |
|---|---|
| Closed | The trigger with the avatar, name and email. |
| Open | The trigger keeps a muted background; the menu opens below it. |
| Fallback | Initials replace the image while it loads or when there is none. |
Accessibility
Built on DropdownMenu: the trigger reports aria-expanded, arrow keys move through the items, Escape closes and focus returns to the trigger.
The full trigger is named by the visible name and email. compact keeps only the avatar, so it takes an aria-label instead ("Account menu for Ana Ruiz").
The avatar image is decorative (alt=""): the name is always next to it, in the trigger or in the header.
UserMenuHeader is plain content, not an item, so it is read when the menu opens but never receives focus.
Signing out, switching accounts and showing admin-only items are your app's decisions; the menu only renders what you pass.