Layout
LayoutSidebar
Collapsible desktop sidebar with brand logo, navigation, footer items, and user menu.
LayoutSidebar
The desktop sidebar panel. Supports collapsed/expanded states, collapsible toggle, custom brand, navigation items, footer items, and a user menu slot. Adapts border and text colors via textMode. Integrates with useXNavigation automatically.
Components
<XALayoutSidebar />
The desktop sidebar panel. Supports collapsed/expanded states, collapsible toggle, custom brand, navigation items, footer items, and a user menu slot. Adapts border and text colors via textMode.
<XALayoutSidebar
v-model:collapsed="collapsed"
:items="navItems"
:color="'primary'"
text-mode="light"
collapsible
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
collapsed | Boolean | undefined | Controlled collapsed state |
collapsible | Boolean | undefined | Show the collapse toggle button |
width | String | undefined | Sidebar width |
collapsedWidth | String | '64px' | Width when collapsed |
items | Array | undefined | Navigation items array |
footerItems | Array | undefined | Footer navigation items |
brand | Object | undefined | Brand config: { title, logo, to } |
user | Object | undefined | User config passed to XALayoutSidebarUserMenu |
position | String | — | Sidebar position (e.g., 'right') |
color | String | 'primary' | Active item color |
textMode | String | 'dark' | Text color mode: 'light' or 'dark' |
mobile | Boolean | false | Renders in mobile mode (shows close button) |
useNavigation | Boolean | true | Merge config from useXNavigation composable |
AI Context
component: XALayoutSidebar
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Desktop sidebar panel; XALayout composes this automatically — use directly only when building a custom shell or embedding a sidebar in a non-standard layout
patterns:
- Use v-model:collapsed to bind collapse state bidirectionally.
- textMode "light" inverts text colors for dark-background sidebars.