Layout
LayoutUserMenu
Header-level user dropdown with avatar, name, email, theme switcher, and configurable menu actions.
LayoutUserMenu
Header-level user dropdown. Renders an avatar button (or icon + name fallback) that opens a dropdown with an info header, theme switcher, settings link, and logout link. Integrates with useXNavigation automatically.
Components
<XALayoutUserMenu />
Header-level user dropdown. Renders an avatar button (or icon + name fallback) that opens a dropdown with an info header, theme switcher, settings link, and logout link.
<XALayoutUserMenu
name="Jane Doe"
email="jane@example.com"
avatar="/avatar.png"
settings-path="/account"
logout-path="/auth/logout"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | String | '' | Display name |
email | String | '' | Email address |
avatar | String | '' | Avatar image URL |
showAvatar | Boolean | true | Show avatar vs. icon+name fallback |
showThemeSwitcher | Boolean | true | Include theme toggle in dropdown |
settingsPath | String | '/settings' | Route for settings menu item |
logoutPath | String | '/auth/logout' | Route for logout menu item |
items | Array | [] | Additional dropdown menu items |
useNavigation | Boolean | true | Merge config from useXNavigation composable |
AI Context
component: XALayoutUserMenu
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: User account dropdown in the header; XALayoutHeader composes this automatically — use directly only when building a custom header
patterns:
- Use items array to add extra menu entries above the built-in settings and logout links.
- showAvatar false renders an icon + name button instead of the avatar circle.