Layout
LayoutResponsiveNav
Renders a horizontal navigation menu on desktop and a dropdown menu on mobile.
LayoutResponsiveNav
Renders a UNavigationMenu (horizontal) on md+ screens and a UDropdownMenu on smaller screens. The dropdown button label automatically reflects the active route item.
Components
<XALayoutResponsiveNav />
Renders a UNavigationMenu (horizontal) on md+ screens and a UDropdownMenu on smaller screens. The dropdown button label automatically reflects the active route item.
<XALayoutResponsiveNav
:items="[
{ label: 'Dashboard', to: '/', icon: 'i-lucide-home' },
{ label: 'Reports', to: '/reports', icon: 'i-lucide-chart-bar' }
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array | required | Navigation items: [{ label, to?, icon?, click? }] |
AI Context
component: XALayoutResponsiveNav
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Top-level or section navigation that should be horizontal on desktop and collapse to a dropdown on mobile
patterns:
- The dropdown label auto-reflects the active route item — no manual selection needed.
- items accept { label, to, icon, click } — use click for action-based items without routes.