Header

How it works

Header.tsx is a thin server component wrapper that renders HeaderClient.tsx. All the real logic lives in HeaderClient.tsx, which is a client component because it manages the mobile menu open/close state.

The header sticks to the top of the viewport as the user scrolls. When the AnnouncementBar is visible, the header shifts down to sit below it automatically — no manual adjustment needed.

Usage

import { Suspense } from "react";
import Header from "@/components/Header";

<Suspense>
  <Header />
</Suspense>

Wrap it in <Suspense> because HeaderClient is a client component and may read from search params on some routes.

Navigation links

Open src/components/HeaderClient.tsx and edit the links array at the top of the file:

const links = [
  { href: "/#pricing", label: "Pricing" },
  { href: "/docs",     label: "Documentation" },
  { href: "#",         label: "Affiliate", isPlaceholder: true },
];

• href — the URL the link navigates to. Use hash-based anchors like /#pricing for sections on the same page.
• label — the text shown in the nav.
• isPlaceholder — optional boolean. When true, the item renders as a non-navigating <button> instead of a <Link>. Use it for "coming soon" pages you want to tease without going anywhere.

Theme toggle

The header includes a ThemeToggle when config.enableThemeToggle is true. See the Theme Toggle docs for full details.

Mobile menu

On small screens the nav collapses behind a hamburger icon. Tapping it opens a dropdown with the same links. The panel closes automatically when a link is tapped — no extra configuration needed.