En-tête et pied de page

Un en-tête flottant qui devient une barre graphite floutée quand la page défile, et un pied de page en carte graphite. Les deux acceptent les liens de votre routeur.

En-tête flottant

Transparente sur le héros en haut de page, la barre devient graphite floutée dès que la page défile. Survolez la première entrée pour ouvrir son menu : pas de numéros, un libellé et une courte description par entrée. Sous 1024 px, la navigation passe dans un panneau latéral qui garde le focus et se ferme avec Échap.

acme

Se connecter

L'en-tête flotte au-dessus du contenu de la page.

TSDemo.tsx

<SiteHeader
  logo={<Logo />}
  logoLabel="Acme"
  linkAs={Link}
  nav={[
    {
      label: "Produit",
      items: [
        { label: "Comment ça marche", href: "/how", description: "Les trois étapes, de l'installation aux résultats." },
        { label: "Cas d'usage", href: "/cases", description: "Ce que les équipes en font." },
      ],
    },
    { label: "Tarifs", href: "/pricing", active: true },
    { label: "À propos", href: "/about" },
  ]}
  cta={{ label: "Se connecter", href: "/login" }}
/>

L'en-tête est en position: fixed : laissez-lui de la place en haut de votre première section (environ 112 px sur mobile, 136 px au-delà), comme le font déjà les héros.

Prop	Type	Défaut	Description
`logo`	`ReactNode`	–	Logo blanc, placé dans un lien vers homeHref.
`logoLabel`	`string`	–	Nom accessible du lien du logo.
`homeHref`	`string`	`"/"`	Cible du lien du logo.
`nav`	`NavItem[]`	–	Liens ({ label, href, active }) et menus déroulants ({ label, items }).
`cta`	`{ label, href }`	–	Action principale : pilule compacte, et grande pilule dans le menu mobile.
`actions`	`ReactNode`	–	Éléments en plus à droite (sélecteur de langue…).
`mobileFooter`	`ReactNode`	–	Contenu en bas du menu mobile.
`linkAs`	`ElementType`	`"a"`	Le composant de lien de votre routeur, pour tous les liens.
`scrollThreshold`	`number`	`24`	Défilement (px) à partir duquel la barre devient graphite.
`menuLabel / closeLabel`	`string`	`"Menu" / "Close"`	Libellés des boutons du menu mobile, pour la traduction.

Pied de page en carte

Marque et appel à l'action à gauche, plan du site en colonnes à droite, liens légaux en bas. Les titres de colonnes sont le seul endroit où les petites capitales espacées sont admises.

TSDemo.tsx

<SiteFooter
  logo={<Logo />}
  logoLabel="Acme"
  tagline="Des interfaces en noir profond, sobres et précises."
  linkAs={Link}
  columns={[
    { title: "Produit", links: [{ label: "Comment ça marche", href: "/how" }, { label: "Tarifs", href: "/pricing" }] },
    { title: "Ressources", links: [{ label: "Documentation", href: "/docs" }, { label: "Blog", href: "/blog" }] },
    { title: "Société", links: [{ label: "À propos", href: "/about" }, { label: "Contact", href: "/contact" }] },
  ]}
  copyright="© 2026 Acme. Tous droits réservés."
  legal={[{ label: "Conditions", href: "/terms" }, { label: "Confidentialité", href: "/privacy" }]}
>
  <PillLink as={Link} href="/start">Commencer</PillLink>
</SiteFooter>

Prop	Type	Défaut	Description
`logo / logoLabel`	`ReactNode / string`	–	Logo et son nom accessible.
`tagline`	`ReactNode`	–	Phrase courte sous le logo.
`children`	`ReactNode`	–	Sous la phrase : une pilule, un contact…
`columns`	`{ title, links }[]`	–	Plan du site en colonnes, titres en petites capitales espacées.
`copyright`	`ReactNode`	–	Mention en bas à gauche.
`legal`	`{ label, href }[]`	–	Liens légaux à droite.
`linkAs`	`ElementType`	`"a"`	Le composant de lien de votre routeur, pour tous les liens.
`columnsLabel / legalLabel`	`string`	`"Site map" / "Legal"`	Noms accessibles des deux navigations.

Traduire les libellés

Chaque libellé intégré est en anglais par défaut et peut être remplacé :

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