Le footer est la section la plus sous-estimée de tout site web. Il est présent sur chaque page, gère la navigation pour les visiteurs récurrents, contient les liens légaux, et sert souvent de dernière opportunité de conversion avant que quelqu'un ne parte. Pourtant, la plupart des développeurs posent un <footer> avec une ligne de copyright et passent à autre chose.
Ce guide parcourt 10 patterns de footer en React avec Tailwind CSS — du footer minimal sur une seule ligne au mega footer complet avec navigation sitemap, inscription newsletter et liens sociaux.
1. Le footer simple
Une seule ligne avec copyright et quelques liens. Parfait pour les sites personnels, portfolios et petites applications où une navigation extensive n'est pas nécessaire.
function SimpleFooter() {
return (
<footer className="border-t border-neutral-200 dark:border-neutral-800">
<div className="mx-auto max-w-7xl px-6 py-8 flex flex-col sm:flex-row items-center justify-between gap-4">
<p className="text-sm text-neutral-500">
© {new Date().getFullYear()} Acme Inc. Tous droits réservés.
</p>
<nav className="flex gap-6">
{["Confidentialité", "CGU", "Contact"].map((item) => (
<a
key={item}
href={`/${item.toLowerCase()}`}
className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors"
>
{item}
</a>
))}
</nav>
</div>
</footer>
);
}
Le pattern flex-col sm:flex-row empile sur mobile et aligne horizontalement sur les écrans plus larges. Cette seule règle couvre 90% des mises en page responsive de footer.
2. Footer multi-colonnes
Le footer à quatre colonnes est le workhorse des sites SaaS et marketing. Chaque colonne regroupe des liens liés sous un titre — typiquement Produit, Entreprise, Ressources et Légal.
Structurez-le comme un tableau de sections pour garder le JSX propre :
const sections = [
{
title: "Produit",
links: ["Fonctionnalités", "Tarifs", "Changelog", "Documentation"],
},
{
title: "Entreprise",
links: ["À propos", "Blog", "Carrières", "Presse"],
},
{
title: "Ressources",
links: ["Communauté", "Centre d'aide", "Templates", "Guides"],
},
{
title: "Légal",
links: ["Confidentialité", "CGU", "Cookies", "RGPD"],
},
];
Le rendu utilise une grille responsive : grid-cols-2 md:grid-cols-4. Sur mobile, les quatre colonnes se réduisent à deux, ce qui garde le footer compact sans cacher de liens derrière un toggle.
3. Footer avec logo et newsletter
Ajouter une colonne logo et un formulaire d'inscription newsletter crée un footer qui sert aussi d'outil de capture de leads. La colonne gauche contient l'identité de marque — logo, slogan, icônes sociales. Les colonnes droites gèrent la navigation. En dessous, un champ newsletter s'étend sur toute la largeur.
Le champ newsletter doit utiliser un élément <form> avec un attribut action ou un handler de soumission. N'utilisez jamais un <input> seul sans form — les lecteurs d'écran et gestionnaires de mots de passe s'appuient sur la sémantique du <form>.
4. Mega footer avec sitemap
Les grands sites (e-commerce, documentation, marketplaces) ont besoin d'un mega footer qui reflète le sitemap complet. Ce pattern utilise cinq ou six colonnes, chacune avec 8 à 12 liens, plus une rangée supérieure avec la marque et une barre de recherche.
La décision design clé : utilisez un conteneur max-w-7xl pour que le contenu du footer ne s'étire pas bord à bord sur les moniteurs ultra-larges. L'espace blanc sur les côtés est intentionnel — il maintient les colonnes à une largeur lisible.
Pour les sites avec 50+ liens de footer, ajoutez un séparateur subtil entre la grille de liens et la barre inférieure (copyright, sélecteur de langue, toggle de thème). Un simple border-t suffit.
5. Footer dark sur site clair
Un footer sombre sur un site autrement clair crée une frontière visuelle nette — les visiteurs savent immédiatement qu'ils ont atteint le bas de page. C'est le pattern le plus courant sur les sites marketing.
Implémentez-le en enveloppant le footer dans un div avec bg-neutral-950 text-white. Les couleurs des liens internes passent à text-neutral-400 hover:text-white. Pas besoin de variantes dark mode puisque le footer est toujours sombre.
6. Footer minimal centré
Pour les apps où le footer est secondaire — dashboards, outils, plateformes internes — un footer centré sur une seule ligne suffit. Logo ou nom d'app à gauche, numéro de version à droite. Trois liens maximum.
La clé est py-4 au lieu de py-12. Un footer minimal ne doit pas demander d'espace vertical. Gardez la taille de police à text-xs pour signaler que c'est de l'information supplémentaire.
7. Footer avec icônes sociales
Les liens sociaux dans le footer sont standard pour toute présence de marque. Utilisez lucide-react ou react-icons pour un dimensionnement d'icônes cohérent. Enveloppez chaque icône dans un <a> avec target="_blank" et rel="noopener noreferrer".
Pattern de layout : les icônes sociales se placent dans la rangée supérieure à côté du logo, ou dans la barre inférieure à côté du copyright. Ne les éparpillez jamais sur plusieurs colonnes — les visiteurs s'attendent à ce que les liens sociaux soient regroupés.
Dimensionnez les icônes à 20px. En dessous de 16px, c'est difficile à toucher sur mobile ; au-dessus de 24px, ça fait lourd dans un contexte de footer.
8. Footer sticky (toujours en bas)
Le problème du "sticky footer" : quand une page a très peu de contenu, le footer flotte au milieu du viewport au lieu de rester en bas. La solution est un layout flex sur le body :
<div className="flex min-h-screen flex-col">
<header />
<main className="flex-1">{children}</main>
<Footer />
</div>
Le flex-1 sur <main> pousse le footer en bas quelle que soit la hauteur du contenu. C'est une solution CSS pure qui ne nécessite ni JavaScript ni position: fixed.
9. Footer avec sélecteurs de langue et thème
Les sites internationaux ont besoin d'un sélecteur de langue dans le footer. Placez-le dans la barre inférieure, à côté du copyright. Utilisez un <select> natif ou un dropdown custom — les deux fonctionnent, mais le <select> natif est plus accessible et ne nécessite aucun JavaScript.
Un toggle de thème (clair/sombre/système) trouve aussi sa place dans le footer comme emplacement secondaire. Le toggle principal vit dans la navbar, mais certains utilisateurs scrollent jusqu'en bas avant de le chercher.
10. Footer accordéon responsive
Sur mobile, un footer avec quatre ou cinq colonnes de liens prend trop d'espace vertical. Le pattern accordéon réduit chaque colonne derrière un titre tappable. Sur desktop, toutes les colonnes sont dépliées par défaut.
Utilisez les éléments HTML details et summary pour un accordéon sans JS, ou useState avec animation de hauteur pour une expérience plus fluide. Le titre doit avoir une icône chevron qui tourne à l'ouverture.
Ce pattern est particulièrement utile pour les footers e-commerce où chaque colonne a 10+ liens. Sans l'accordéon, le footer mobile peut être plus long que le contenu de la page lui-même.
Conseils d'implémentation
Accessibilité : chaque lien de footer doit avoir un texte descriptif. Évitez "Cliquez ici" ou des URLs brutes. Utilisez aria-label sur les liens icône-seule (icônes sociales).
Performance : le contenu du footer est sous le fold, donc il n'affecte pas le Largest Contentful Paint. Mais si vous chargez des bibliothèques d'icônes lourdes, envisagez le tree-shaking ou des SVGs inline.
SEO : les liens du footer sont crawlés par les moteurs de recherche. Utilisez des balises <a> avec des attributs href — pas des handlers onClick qui rendent du texte stylé comme des liens.
Gagnez du temps
Construire un footer from scratch à chaque projet est fastidieux. Le catalogue de footers Incubator propose 15+ sections de footer prêtes à l'emploi — multi-colonnes, mega, minimal, dark, avec newsletter, avec liens sociaux — le tout en React et Tailwind CSS. Intégrez-en un dans votre projet et personnalisez le contenu.
Parcourez la bibliothèque de sections complète pour les headers, heroes, CTAs et toutes les autres sections dont votre landing page a besoin.