Layout
LayoutContentNav
In-page secondary sidebar for settings-style sub-navigation; collapses to a select on mobile.
LayoutContentNav
Settings-style secondary sidebar. On desktop it renders a sticky sidebar nav panel; on mobile it collapses to a USelect dropdown.
Components
<XALayoutContentNav />
Settings-style secondary sidebar. On desktop it renders a sticky sidebar nav panel; on mobile it collapses to a USelect dropdown.
<XALayoutContentNav
label="Account"
:items="[
{ label: 'Profile', to: '/settings/profile', icon: 'i-lucide-user' },
{ label: 'Security', to: '/settings/security', icon: 'i-lucide-shield' }
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array | [] | Navigation items: [{ label, to, icon? }] |
label | String | '' | Section label shown above the list |
AI Context
component: XALayoutContentNav
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Settings, account, or profile pages that have multiple sub-sections — renders a sidebar nav on desktop, a select dropdown on mobile
patterns:
- Place alongside the page content in a two-column flex/grid layout.
- items accept { label, to, icon? } — active item is auto-detected from route.