XXHeaderNav (Branded)
XXHeaderNav (Branded)
The XXHeaderNav component is the X Enterprises branded contract-equivalent of XHeaderNav. Both pull all of their content (logo, nav links, CTA buttons) from app.config.xMarketing.header — the XX variant is the canonical X-branded choice when building X Enterprises products. Drop it once at the top of your default layout.
Components
<XXHeaderNav />
<XXHeaderNav />
// app.config.ts
export default defineAppConfig({
xMarketing: {
header: {
logo: {
src: "/logo-light.svg",
srcDark: "/logo-dark.svg",
alt: "Acme"
},
nav: {
links: [
{ label: "Features", to: "/features" },
{ label: "Pricing", to: "/pricing" }
],
buttons: [
{ label: "Sign In", to: "/login", variant: "ghost", color: "neutral" },
{ label: "Get Started", to: "/signup", variant: "solid", color: "primary" }
]
}
}
}
});
The component takes no props. To swap content per route — use XXHeader (props-based) instead.
AI Context
category: App Shell
package: "@xenterprises/nuxt-x-marketing"
components:
- XXHeaderNav
use-when: >
Building a config-driven app-shell header inside an X Enterprises product
— the canonical X-branded choice. Use XXHeader for a per-page props-based
variant; use XMarkLayoutNavbar for a non-branded white-label navbar.
typical-page-section: Mounted once at the top of the default layout.
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.
XXFooter (Branded)
X Enterprises branded footer that reads its logo, body, link columns, social icons, and background from appConfig.xMarketing.footer, plus an optional newsletter signup that emits a `newsletter-submit` event.
