X Enterprises
nuxt-x-marketing

XXHeaderNav (Branded)

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

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.
Copyright © 2026