Layout
LayoutSidebarUserMenu
Sidebar-embedded user avatar dropdown with theme switcher and custom menu items.
LayoutSidebarUserMenu
Avatar-based dropdown at the bottom of the sidebar. Shows user name and email when expanded; shows avatar only when collapsed. Includes a built-in theme switcher (light/dark/system) and emits logout and navigate events.
Components
<XALayoutSidebarUserMenu />
Avatar-based dropdown at the bottom of the sidebar. Shows user name and email when expanded; shows avatar only when collapsed. Includes a built-in theme switcher (light/dark/system) and emits logout and navigate events.
<XALayoutSidebarUserMenu
:user="{ name: 'Jane Doe', email: 'jane@example.com', avatar: '/avatar.png' }"
:collapsed="false"
text-mode="dark"
show-online-status
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
user | Object | {} | User object: { name, email, avatar } |
collapsed | Boolean | false | Collapsed display mode |
showOnlineStatus | Boolean | false | Show green online indicator dot |
textMode | String | 'dark' | Text color mode: 'light' or 'dark' |
items | Array | undefined | Custom dropdown menu items |
AI Context
component: XALayoutSidebarUserMenu
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: User avatar dropdown pinned to the bottom of the sidebar; XALayoutSidebar composes this via its user prop — use directly only for custom sidebar layouts
patterns:
- Emits "logout" and "navigate" events from the dropdown menu.
- Includes a built-in light/dark/system theme switcher.