User
UserMenu
Avatar trigger with dropdown menu for profile, settings, and logout actions.
User
The User category provides a set of composable components for displaying user identity. XAUserCard and XAUserItem cover card and list-row contexts. XAUserMenu handles the navigation header avatar + dropdown pattern. XAUserRoleBadge renders role strings as colored badges with automatic color mapping. XAUser is a drop-in alias for XAUserCard.
Components
<XAUserMenu />
An avatar-based dropdown trigger that opens a UDropdownMenu with Profile, Settings, and Logout items. Designed for navigation headers. Supports compact mode (avatar only), optional status indicator, custom menu items via the customItems prop, and a header section inside the dropdown that shows name and email.
<!-- Basic -->
<XAUserMenu
name="John Doe"
email="john@example.com"
avatar="/avatars/john.jpg"
@profile="router.push('/profile')"
@settings="router.push('/settings')"
@logout="signOut()"
/>
<!-- From user object, compact -->
<XAUserMenu :user="currentUser" compact @logout="signOut()" />
<!-- Custom additional items -->
<XAUserMenu
:user="currentUser"
:custom-items="[[{ label: 'My Team', icon: 'i-lucide-users', onSelect: () => viewTeam() }]]"
@logout="signOut()"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
user | Object | null | User object with name, email, avatar, role, status. |
name | String | '' | Display name. |
email | String | '' | Email address. |
avatar | String | '' | Avatar image URL. |
role | String | '' | Role shown under name in the trigger. |
status | String | null | Online status — 'online', 'offline', 'away', or 'busy'. |
size | String | 'md' | Avatar size — 'xs', 'sm', 'md', 'lg', or 'xl'. |
compact | Boolean | false | Show only the avatar (no name, chevron, or role). |
showStatus | Boolean | false | Display status indicator on the avatar. |
showHeader | Boolean | true | Show name/email header section inside the dropdown. |
showProfile | Boolean | true | Include the Profile menu item. |
showSettings | Boolean | true | Include the Settings menu item. |
Events
| Event | Description |
|---|---|
profile | Emitted when Profile is selected. |
settings | Emitted when Settings is selected. |
logout | Emitted when Logout is selected. |
AI Context
component: XAUserMenu
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: User
use-when: Navigation header avatar trigger that opens a dropdown with Profile, Settings, and Logout actions. Supports compact mode (avatar only), status indicator, and custom menu item groups via customItems.