X Enterprises
nuxt-x-marketing

XXHeader (Branded)

X Enterprises branded app-shell header built on UHeader, with explicit navLinks/primaryCta/secondaryCta props and a transparent mode. The contract-equivalent of XHeaderApp.

XXHeader (Branded)

The XXHeader component is the X Enterprises branded contract-equivalent of XHeaderApp. Both wrap Nuxt UI's UHeader and accept the same props (navLinks, primaryCta, secondaryCta, transparent) — XXHeader is the canonical choice when the header is part of an X-branded product suite (it documents its purpose via the source comment, and the XX prefix signals X-branded semantics). For a non-branded generic navbar use XMarkLayoutNavbar instead.

Components

<XXHeader />

<XXHeader
  :nav-links="[
    { label: 'Features', to: '/features' },
    { label: 'Pricing', to: '/pricing' }
  ]"
  :primary-cta="{ label: 'Get Started', to: '/signup' }"
  :secondary-cta="{ label: 'Sign In', to: '/login' }"
>
  <template #logo>
    <NuxtLink to="/">
      <img src="/logo.svg" alt="Acme" class="h-8" />
    </NuxtLink>
  </template>
</XXHeader>

Transparent mode over a hero:

<XXHeader :nav-links="navLinks" :primary-cta="cta" :transparent="true" />

Props

PropTypeDefaultDescription
navLinksarray[]Items passed to Nuxt UI's UNavigationMenu ({ label, to, children? }).
primaryCtaobjectnullPrimary CTA { label, to }. Rendered with variant="solid" color="primary".
secondaryCtaobjectnullSecondary CTA { label, to }. Rendered with variant="ghost" color="neutral".
transparentbooleanfalseWhen true, root background is transparent and text is white — designed to sit over a hero.

Slots

SlotDescription
logoReplace the centered "LOGO" placeholder with a real logo (image / brand mark).

AI Context

category: App Shell
package: "@xenterprises/nuxt-x-marketing"
components:
  - XXHeader
use-when: >
  Choosing the X-branded props-based header. Functionally identical to
  XHeaderApp — pick XXHeader when working inside an X product suite or when
  you want to signal the X-branded contract explicitly. For appConfig-driven
  content use XXHeaderNav. For a non-branded generic navbar use
  XMarkLayoutNavbar.
typical-page-section: Mounted once per page at the top of the default layout or hero block.

FooterXLegal

App-shell legal bar — minimal copyright + legal-link row that defaults to X Enterprises content but accepts logo/copyright/links overrides for white-label use.

XXHeaderNav (Branded)

X Enterprises branded navigation header — reads logo, nav links, and CTAs from appConfig.xMarketing.header. The contract-equivalent of XHeaderNav.

Copyright © 2026