Layout
LayoutSecondaryNav
Horizontal sub-navigation bar with optional back button and right-side actions slot.
LayoutSecondaryNav
Horizontal sub-navigation bar rendered below the header. Supports links and action callbacks, an optional back button, and a right-side #actions slot.
Components
<XALayoutSecondaryNav />
Horizontal sub-navigation bar rendered below the header. Supports links and action callbacks, an optional back button, and a right-side #actions slot.
<XALayoutSecondaryNav
:items="[
{ label: 'Overview', to: '/project' },
{ label: 'Tasks', to: '/project/tasks', badge: 12 }
]"
show-back
@back="$router.back()"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array | [] | Nav items: [{ label, to?, icon?, badge?, action? }] |
label | String | '' | Accessible label (not displayed) |
showBack | Boolean | false | Show back arrow button |
AI Context
component: XALayoutSecondaryNav
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Horizontal sub-navigation below the main header for project, resource, or entity detail pages — complements XALayoutPageHeader tabs when a persistent bar is preferred
patterns:
- Use the #actions slot for buttons on the right side of the bar.
- showBack emits a "back" event — bind @back to $router.back() or a custom handler.