Marketing Nav
The marketing site header — FFG wordmark, primary links, Log in and a CTA, collapsing to a menu below 920px.
Installation
pnpm dlx shadcn@latest add @ffg/marketing-navUsage
"use client"
import { MarketingNav } from "@/components/ui/marketing-nav"
<MarketingNav
links={[
{ label: "Our mission", href: "/our-mission", active: pathname === "/our-mission" },
{ label: "Our impact", href: "/impact" },
{ label: "Our partners", href: "/partners" },
{ label: "Newsletter", href: "/newsletter" },
]}
loginHref="https://app.factoryforgood.org/login"
cta={{ label: "Get started", href: "/book" }}
onNavigate={(href) => router.push(href)}
/>Composed from the top-nav pieces (FfgLogo, NavLinks, NavMenu) without
the product's avatar menu. It has no background, so it sits over the page's
own backdrop; wrap it in your page container for side padding.
- loginHref — pass
nullto hide Log in - cta — the filled button; also the last item in the mobile menu
- The links swap to the menu at 920px rather than
md, since four links and two buttons crowd earlier