El footer es la sección más infravalorada de cualquier sitio web. Se sitúa al final de cada página, gestiona la navegación de los visitantes que vuelven, alberga los enlaces legales y a menudo representa la última oportunidad de conversión antes de que alguien se marche. Aun así, la mayoría de desarrolladores se limitan a poner un <footer> con una línea de copyright y lo dan por terminado.
Esta guía recorre 10 patrones de footer en React con Tailwind CSS, desde un footer minimalista de una sola línea hasta un mega footer completo con navegación tipo sitemap, alta a newsletter y enlaces sociales.
1. El footer simple
Un footer de una sola fila con el copyright y unos pocos enlaces. Funciona muy bien para sitios personales, portfolios y aplicaciones pequeñas donde no necesitas una navegación extensa.
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. All rights reserved.
</p>
<nav className="flex gap-6">
{["Privacy", "Terms", "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>
);
}
El patrón flex-col sm:flex-row apila los elementos en móvil y los alinea en horizontal en pantallas más grandes. Esta única regla resuelve el 90% de los layouts de footer responsive.
2. Footer multicolumna
El footer de cuatro columnas es el caballo de batalla de los sitios SaaS y de marketing. Cada columna agrupa enlaces relacionados bajo un encabezado, normalmente Producto, Empresa, Recursos y Legal.
Estructúralo como un array de secciones para mantener el JSX limpio:
const sections = [
{
title: "Product",
links: ["Features", "Pricing", "Changelog", "Docs"],
},
{
title: "Company",
links: ["About", "Blog", "Careers", "Press"],
},
{
title: "Resources",
links: ["Community", "Help Center", "Templates", "Guides"],
},
{
title: "Legal",
links: ["Privacy", "Terms", "Cookie Policy", "GDPR"],
},
];
Renderízalo con un grid responsive: grid-cols-2 md:grid-cols-4. En móvil, las cuatro columnas se reducen a dos, lo que mantiene el footer compacto sin esconder ningún enlace detrás de un toggle.
3. Footer con logo y newsletter
Añadir una columna con el logo y un alta a newsletter crea un footer que también funciona como herramienta de captación de leads. La columna izquierda contiene la identidad de marca, el logo, el eslogan y los iconos sociales. Las columnas de la derecha se ocupan de la navegación. Debajo de todo, un campo de newsletter ocupa todo el ancho.
El campo de newsletter debería usar un elemento <form> con un atributo action adecuado o un manejador de envío. Nunca uses un <input> suelto sin formulario, ya que los lectores de pantalla y los gestores de contraseñas dependen de la semántica del <form>.
4. Mega footer con sitemap
Los sitios grandes (e-commerce, documentación, marketplaces) necesitan un mega footer que refleje el sitemap completo. Este patrón usa cinco o seis columnas, cada una con entre 8 y 12 enlaces, más una fila superior con la marca y una barra de búsqueda.
La decisión de diseño clave: usa un contenedor max-w-7xl para que el contenido del footer no se estire de borde a borde en monitores ultrawide. El espacio en blanco de los lados es intencionado, porque mantiene las columnas a un ancho legible.
Para sitios con más de 50 enlaces en el footer, añade un separador sutil entre el grid de enlaces y la barra inferior (copyright, selector de idioma, toggle de tema). Con un simple border-t basta.
5. Footer oscuro en sitios claros
Un footer oscuro sobre un sitio que por lo demás es claro crea un límite visual nítido, de modo que el visitante sabe al instante que ha llegado al final. Es el patrón más habitual en sitios de marketing.
Impleméntalo envolviendo el footer en un div con bg-neutral-950 text-white. Los colores de los enlaces internos pasan a text-neutral-400 hover:text-white. No hacen falta variantes de dark mode porque el footer siempre es oscuro.
6. Footer minimalista con layout centrado
Para aplicaciones donde el footer es algo secundario, dashboards, herramientas, plataformas internas, funciona bien un footer centrado de una sola línea. El logo o el nombre de la app a la izquierda, el número de versión a la derecha. Tres enlaces como máximo.
La clave está en usar py-4 en lugar de py-12. Un footer minimalista no debería reclamar espacio vertical. Mantén el tamaño de fuente en text-xs para señalar que se trata de información complementaria.
7. Footer con iconos sociales
Los enlaces sociales en el footer son un estándar en cualquier presencia de marca. Usa lucide-react o react-icons para conseguir un tamaño de icono coherente. Envuelve cada icono en una <a> con target="_blank" y rel="noopener noreferrer".
Patrón de layout: los iconos sociales se colocan en la fila superior junto al logo, o en la barra inferior junto al copyright. Nunca los repartas entre varias columnas, porque el visitante espera encontrar los enlaces sociales agrupados.
Dimensiona los iconos a 20px. Por debajo de 16px cuesta pulsarlos en móvil; por encima de 24px resultan demasiado pesados en el contexto de un footer.
8. Footer pegado (siempre abajo)
El problema del "sticky footer": cuando una página tiene muy poco contenido, el footer flota en mitad del viewport en lugar de quedarse abajo. La solución es un layout flex en el body:
<div className="flex min-h-screen flex-col">
<header />
<main className="flex-1">{children}</main>
<Footer />
</div>
El flex-1 en <main> empuja el footer hacia abajo sin importar la altura del contenido. Es una solución solo con CSS que no requiere JavaScript ni position: fixed.
9. Footer con selectores de idioma y tema
Los sitios internacionales necesitan un selector de idioma en el footer. Colócalo en la barra inferior, junto al copyright. Usa un elemento <select> o un dropdown personalizado, ambos funcionan, pero el <select> nativo es más accesible y no requiere nada de JavaScript.
Un toggle de tema (claro/oscuro/sistema) también encaja en el footer como ubicación secundaria. El toggle principal vive en la navbar, pero algunos usuarios bajan hasta el final antes de buscarlo.
10. Footer responsive con acordeón
En móvil, un footer con cuatro o cinco columnas de enlaces ocupa demasiado espacio vertical. El patrón de acordeón pliega cada columna detrás de un encabezado pulsable. En escritorio, todas las columnas aparecen expandidas por defecto.
Usa los elementos HTML details y summary para un acordeón sin nada de JS, o useState con animación de altura para una experiencia más fluida. El encabezado debería llevar un icono de chevron que rote al abrirse.
Este patrón resulta especialmente útil en footers de e-commerce donde cada columna tiene más de 10 enlaces. Sin el acordeón, el footer en móvil puede acabar siendo más largo que el propio contenido de la página.
Consejos de implementación
Accesibilidad: cada enlace del footer debería tener un texto descriptivo. Evita los "Haz clic aquí" o las URLs a secas. Usa aria-label en los enlaces que solo llevan icono (los iconos sociales).
Rendimiento: el contenido del footer queda por debajo del fold, así que no afecta al Largest Contentful Paint. Pero si cargas librerías de iconos pesadas, plantéate aplicar tree-shaking o usar SVGs en línea.
SEO: los buscadores rastrean los enlaces del footer. Usa etiquetas <a> adecuadas con atributos href, no manejadores onClick que renderizan texto con estilo de enlace.
Sáltate el boilerplate
Construir un footer desde cero cada vez es tedioso. El catálogo de footers de Incubator tiene más de 15 secciones de footer listas para usar, multicolumna, mega, minimalista, oscuro, con newsletter, con redes sociales, todas hechas en React y Tailwind CSS. Mete una en tu proyecto y personaliza el contenido.
Explora la biblioteca de secciones completa para headers, heroes, CTAs y cualquier otra sección que necesite tu landing page.
Relacionado en incubator
- Componentes de footer en React: secciones de footer listas para proyectos en React.
- Componentes de navbar en React: secciones de navegación para combinar con tu footer.
- Secciones de newsletter: bloques de alta para incrustar dentro de un footer.
- Catálogo completo de secciones: todas las secciones para copiar y pegar en landing pages.
- Incubator vs Tailwind UI: cómo se comparan las dos librerías para los patrones de footer.