Layout
LayoutPageHeader
Page-level title block with optional back button, breadcrumbs, description, tabs, and actions slot.
LayoutPageHeader
Standardized page header block. Shows optional breadcrumbs row, a title with optional back button, description (or slot), actions slot, and a tab bar that highlights the active route.
Components
<XALayoutPageHeader />
Standardized page header block. Shows optional breadcrumbs row, a title with optional back button, description (or slot), actions slot, and a tab bar that highlights the active route.
<XALayoutPageHeader
title="Users"
description="Manage your team members"
:back="{ to: '/admin', label: 'Admin' }"
:tabs="[
{ label: 'All', to: '/users' },
{ label: 'Admins', to: '/users/admins', badge: 2 }
]"
sticky
>
<template #actions>
<UButton icon="i-lucide-plus">Invite</UButton>
</template>
</XALayoutPageHeader>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | required | Page title |
description | String | undefined | Subtitle text |
back | Object | undefined | Back button: { to, label? } |
breadcrumbs | Array | undefined | Breadcrumb items: [{ label, to? }] |
tabs | Array | undefined | Tab items: [{ label, to, badge? }] |
sticky | Boolean | false | Stick header to top on scroll |
loading | Boolean | false | Show skeleton placeholders |
AI Context
component: XALayoutPageHeader
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Top of each page inside XALayout — provides consistent title, breadcrumbs, back button, sub-tabs, and actions placement
patterns:
- tabs array items accept { label, to, badge? } — active tab is auto-detected from route.
- Use the #actions slot for CTA buttons (e.g. "Create", "Export").
- sticky keeps the header visible while scrolling the page content.