Layout
LayoutHeader
Sticky top header with mobile menu toggle, breadcrumbs, search, actions, and user menu.
LayoutHeader
Sticky top header bar. The left side shows a mobile menu toggle and breadcrumbs (or top nav items). The right side renders search, action buttons with optional badges, and a user menu. Integrates with useXNavigation automatically.
Components
<XALayoutHeader />
Sticky top header bar. The left side shows a mobile menu toggle and breadcrumbs (or top nav items). The right side renders search, action buttons with optional badges, and a user menu.
<XALayoutHeader
:show-breadcrumbs="true"
:search="{ enabled: true, placeholder: 'Search...', shortcut: '⌘K' }"
:actions="[{ icon: 'i-lucide-bell', label: 'Notifications', badge: 3 }]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
showMobileMenu | Boolean | true | Show the hamburger menu button |
showBreadcrumbs | Boolean | true | Show the breadcrumbs component |
showUserMenu | Boolean | true | Show the default user menu |
search | Object | { enabled: false } | Search config: { enabled, placeholder, shortcut } |
actions | Array | [] | Header action buttons: [{ icon, label, to, action, badge }] |
topNavItems | Array | undefined | Navigation items to render in the header |
useNavigation | Boolean | true | Merge config from useXNavigation composable |
AI Context
component: XALayoutHeader
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Adding a sticky header inside XALayout; XALayout composes this automatically — use directly only when building a custom shell
patterns:
- actions array items accept { icon, label, to, action, badge } — badge shows a notification count.
- search.shortcut renders a keyboard hint badge beside the search input.