Layout
LayoutSidebarNavItem
Individual sidebar nav item supporting links, actions, badges, children, and collapsed tooltips.
LayoutSidebarNavItem
Single navigation item. Supports NuxtLink routing, action callbacks, badges, nested children (collapsible in expanded mode, dropdown in collapsed mode), and tooltip labels when collapsed.
Components
<XALayoutSidebarNavItem />
Single navigation item. Supports NuxtLink routing, action callbacks, badges, nested children (collapsible in expanded mode, dropdown in collapsed mode), and tooltip labels when collapsed.
<XALayoutSidebarNavItem
:item="{
label: 'Reports',
icon: 'i-lucide-chart-bar',
to: '/reports',
badge: { label: 'New', color: 'success' },
children: [
{ label: 'Monthly', to: '/reports/monthly' }
]
}"
:collapsed="false"
color="primary"
text-mode="dark"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
item | Object | required | Nav item: { label, icon, to, action, badge, children, disabled } |
collapsed | Boolean | false | Collapsed display mode |
color | String | 'primary' | Active item color |
textMode | String | 'dark' | Text color mode: 'light' or 'dark' |
nested | Boolean | false | Renders as a child item with reduced padding |
AI Context
component: XALayoutSidebarNavItem
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Rendering individual nav items inside XALayoutSidebarNav; usually used indirectly — XALayoutSidebarNav instantiates this automatically
patterns:
- item.children renders nested items; in collapsed mode they appear as a dropdown.
- item.badge accepts { label, color } for notification/status badges.
- item.action is a callback function for non-link items.