nuxt-x-affiliate
Site Header
Sticky site-wide header with logo, primary nav, search trigger, and CTA. Auto-emits WebSite schema via the site chrome.
Site Header
The XAFSiteHeader component renders the site-wide sticky header. It pairs with <XAFSiteFooter> and <XAFMegaMenu> to form the full site chrome.
Components
<XAFSiteHeader />
<XAFSiteHeader>
<template #nav>
<NuxtLink to="/categories">Categories</NuxtLink>
<NuxtLink to="/reviews">Reviews</NuxtLink>
<NuxtLink to="/about">About</NuxtLink>
</template>
<template #cta>
<UButton to="/newsletter" color="primary">Subscribe</UButton>
</template>
</XAFSiteHeader>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
transparent | boolean | false | Render a transparent header that becomes solid on scroll |
sticky | boolean | true | Stick to the top of the viewport |
Slots
| Slot | Description |
|---|---|
brand | Logo / brand mark (defaults to xAffiliate.brand.name) |
nav | Primary navigation links |
cta | Right-aligned CTA (subscribe button, login, etc.) |
search | Custom search trigger (defaults to a button that opens <XAFSearchBar>) |
Tips
- Pair with
<XAFMegaMenu>for dropdown navigation: render the<XAFMegaMenu>inside thenavslot. - For sticky headers, leave a
padding-topon your page wrapper equal to the header height to prevent content from being hidden under the sticky bar. - The header reads
xAffiliate.brandfrom app config for the default logo + name.
AI Context
component: XAFSiteHeader
package: "@xenterprises/nuxt-x-affiliate"
use-when: Site-wide sticky header with brand, nav, search, and CTA