Header and footer

A floating header that turns into a blurred graphite bar as the page scrolls, and a footer laid out as a graphite card. Both take your router's links.

Floating header

Transparent over the hero at the top of the page, the bar becomes blurred graphite once the page scrolls. Hover the first entry to open its dropdown: no numbers, a label and a short description per item. Below 1024 px, the navigation moves into a side panel that keeps focus inside and closes with Escape.

acme

The header floats above the page content.

TSDemo.tsx

<SiteHeader
  logo={<Logo />}
  logoLabel="Acme"
  linkAs={Link}
  nav={[
    {
      label: "Product",
      items: [
        { label: "How it works", href: "/how", description: "The three steps, from setup to results." },
        { label: "Use cases", href: "/cases", description: "What teams build with it." },
      ],
    },
    { label: "Pricing", href: "/pricing", active: true },
    { label: "About", href: "/about" },
  ]}
  cta={{ label: "Sign in", href: "/login" }}
/>

The header is position: fixed: leave room for it at the top of your first section (about 112 px on mobile, 136 px beyond), as heroes already do.

Prop	Type	Default	Description
`logo`	`ReactNode`	–	White logo, wrapped in a link to homeHref.
`logoLabel`	`string`	–	Accessible name of the logo link.
`homeHref`	`string`	`"/"`	Target of the logo link.
`nav`	`NavItem[]`	–	Links ({ label, href, active }) and dropdowns ({ label, items }).
`cta`	`{ label, href }`	–	Main action: a compact pill, and a large one in the mobile menu.
`actions`	`ReactNode`	–	Extra elements on the right (language switcher…).
`mobileFooter`	`ReactNode`	–	Content at the bottom of the mobile menu.
`linkAs`	`ElementType`	`"a"`	Your router's link component, used for every link.
`scrollThreshold`	`number`	`24`	Scroll offset (px) from which the bar turns graphite.
`menuLabel / closeLabel`	`string`	`"Menu" / "Close"`	Labels of the mobile menu buttons, for translations.

Footer as a card

Brand and call to action on the left, site map in columns on the right, legal links at the bottom. The column titles are the only place where spaced small caps are allowed.

TSDemo.tsx

<SiteFooter
  logo={<Logo />}
  logoLabel="Acme"
  tagline="Interfaces in deep black, sober and precise."
  linkAs={Link}
  columns={[
    { title: "Product", links: [{ label: "How it works", href: "/how" }, { label: "Pricing", href: "/pricing" }] },
    { title: "Resources", links: [{ label: "Docs", href: "/docs" }, { label: "Blog", href: "/blog" }] },
    { title: "Company", links: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
  ]}
  copyright="© 2026 Acme. All rights reserved."
  legal={[{ label: "Terms", href: "/terms" }, { label: "Privacy", href: "/privacy" }]}
>
  <PillLink as={Link} href="/start">Get started</PillLink>
</SiteFooter>

Prop	Type	Default	Description
`logo / logoLabel`	`ReactNode / string`	–	Logo and its accessible name.
`tagline`	`ReactNode`	–	Short sentence under the logo.
`children`	`ReactNode`	–	Under the sentence: a pill, a contact…
`columns`	`{ title, links }[]`	–	Site map in columns, with spaced small-caps titles.
`copyright`	`ReactNode`	–	Bottom line on the left.
`legal`	`{ label, href }[]`	–	Legal links on the right.
`linkAs`	`ElementType`	`"a"`	Your router's link component, used for every link.
`columnsLabel / legalLabel`	`string`	`"Site map" / "Legal"`	Accessible names of both navigations.

Translating the labels

Every built-in label is in English by default and can be replaced:

<SiteHeader menuLabel="Menu" closeLabel="Fermer" … />
<SiteFooter columnsLabel="Plan du site" legalLabel="Informations légales" … />