nuxt-x-affiliate

Site Header

Site-wide header that can float transparently over a hero and solidify on scroll, with config-driven nav, a working mobile menu, and optional search.

Site Header

The site-wide header. Pairs with <XAFSiteFooter>, <XAFLegalBar>, and <XAFMegaMenu> to form the full site chrome.

Rebuilt on the marketing layer's navbar. It can now start transparent over a hero and fade to solid on scroll, resolves its links, buttons, and logo from app config, and its mobile menu opens — the previous version rendered a hamburger wired to nothing.

Components

`<XAFSiteHeader />`

<!-- Interior page: solid, sticky, keeps its space in the flow -->
<XAFSiteHeader />

<!-- Landing page: floats over the hero, solidifies past the scroll threshold -->
<XAFSiteHeader transparent />
<XAFHeroLanding title="Gear we actually tested" :img="{ src: '/hero.jpg' }" />

Most sites configure the header once in app.config.ts and never pass props:

export default defineAppConfig({
  xAffiliate: {
    brand: { name: 'BestKitchenGear', logo: '/logo.svg' },
    header: {
      // `src` shows while transparent over the hero (usually a knockout
      // mark); `srcDark` shows once the header is solid.
      logo: { src: '/logo-white.svg', srcDark: '/logo.svg', alt: 'BestKitchenGear' },
      nav: {
        links: [
          { label: 'Reviews', to: '/reviews' },
          { label: 'Best of', to: '/best' },
        ],
        // The last button renders as the primary CTA.
        buttons: [
          { label: 'Sign in', to: '/account' },
          { label: 'Join free', to: '/join' },
        ],
      },
    },
  },
})

Props

Props always win over app config.

Prop	Type	Default	Description
`transparent`	`boolean`	`false`	Start transparent over a hero and fade to solid on scroll
`links`	`{ label, to }[]`	`xAffiliate.header.nav.links`	Primary nav links
`buttons`	`XafButton[]`	`xAffiliate.header.nav.buttons`	Header buttons; the last is the primary CTA
`logo`	`{ src?, srcDark?, alt? }`	`xAffiliate.header.logo`, then `brand.logo`	Transparent-state and solid-state marks
`scrollThreshold`	`number`	`100`	Scroll distance (px) before the header turns solid
`showSearch`	`boolean`	`true`	Show the `<XAFSearchBar>`
`sticky`	`boolean`	`true`	Pin the header to the top of the viewport

Slots

Slot	Description
`logo`	Replace the brand link entirely
`links`	Replace the desktop nav links
`actions`	Replace the desktop button row
`mobile-actions`	Replace the button stack inside the mobile menu

Tips

transparent implies the header floats over a hero, so it leaves the document flow (position: fixed) and the hero starts at the top of the viewport. A solid header stays sticky, keeping the space it occupies — no manual top padding needed on interior pages.
Give the two logo slots different marks. A knockout mark that reads over a dark hero disappears against the solid white header.
Button variants adapt to the state: secondary buttons render soft over a hero and outline once solid. A ghost variant is promoted to outline, because a ghost button has no background and vanishes against a photo.

AI Context

component: XAFSiteHeader
package: "@xenterprises/nuxt-x-affiliate"
use-when: Site-wide header, transparent over a hero or solid on interior pages

Edit this pageorReport an issue

Currency Switcher

Currency picker dropdown or compact pill with cookie persistence and a global currency-changed event for price re-formatting.

Site Footer

Site-wide footer with a brand column, link columns, social row, optional newsletter band, and the required FTC legal row.