nuxt-x-marketing
HeaderApp
App-shell header built on Nuxt UI's UHeader, with explicit navLinks/primaryCta/secondaryCta props and a transparent mode for use over hero backgrounds.
HeaderApp
The XHeaderApp component is an X-prefixed app-shell header built on top of Nuxt UI's UHeader. Unlike XHeaderNav (which reads everything from app.config.xMarketing.header), this variant takes its content via explicit props — making it a better fit when header content is dynamic per page or per route. A transparent flag switches the root background to "transparent / white text", designed for direct placement over a hero.
Prefer
XXHeaderfor the props-based X-branded variant.
Components
<XHeaderApp />
Default header with logo, nav links, and one CTA:
<XHeaderApp
:nav-links="[
{ label: 'Features', to: '/features' },
{ label: 'Pricing', to: '/pricing' },
{ label: 'Docs', to: '/docs' }
]"
:primary-cta="{ label: 'Get Started', to: '/signup' }"
>
<template #logo>
<NuxtLink to="/">
<img src="/logo.svg" alt="Acme" class="h-8" />
</NuxtLink>
</template>
</XHeaderApp>
Transparent over a hero:
<XHeaderApp :nav-links="navLinks" :primary-cta="cta" :transparent="true" />
<XMarkHero ... />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
navLinks | array | [] | Items passed to Nuxt UI's UNavigationMenu ({ label, to, children? }). |
primaryCta | object | null | Primary CTA { label, to }. Rendered with variant="solid" color="primary". |
secondaryCta | object | null | Secondary CTA { label, to }. Rendered with variant="ghost" color="neutral". |
transparent | boolean | false | When true, root background is transparent and text is white — designed to sit over a hero. |
Slots
| Slot | Description |
|---|---|
logo | Replace the centered "LOGO" placeholder with a real logo (image / brand mark). |
AI Context
category: App Shell
package: "@xenterprises/nuxt-x-marketing"
components:
- XHeaderApp
use-when: >
Building a generic app shell header whose content is determined per page
rather than via appConfig — for example, dashboards, authenticated views,
or single-purpose marketing pages with a unique nav structure. For the
appConfig-driven equivalent, use XHeaderNav. For a white-label generic
navbar with no X branding, use XMarkLayoutNavbar.
typical-page-section: Mounted once per page in the default layout or at the top of a page block.