The footer is the most underestimated section on any website. It sits at the bottom of every page, handles navigation for returning visitors, holds legal links, and often serves as the last conversion opportunity before someone leaves. Yet most developers throw a <footer> with a copyright line and call it a day.
This guide walks through 10 footer patterns in React with Tailwind CSS — from a minimal single-line footer to a full mega footer with sitemap navigation, newsletter signup, and social links.
1. The Simple Footer
A single-row footer with copyright and a few links. This works for personal sites, portfolios, and small apps where you don't need extensive navigation.
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>
);
}
The flex-col sm:flex-row pattern stacks on mobile and aligns horizontally on larger screens. This single rule handles 90% of responsive footer layouts.
2. Multi-Column Footer
The four-column footer is the workhorse of SaaS and marketing sites. Each column groups related links under a heading — typically Product, Company, Resources, and Legal.
Structure it as an array of sections to keep the JSX clean:
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 it with a responsive grid: grid-cols-2 md:grid-cols-4. On mobile, the four columns collapse into two, which keeps the footer compact without hiding any links behind a toggle.
3. Footer with Logo and Newsletter
Adding a logo column and a newsletter signup creates a footer that doubles as a lead capture tool. The left column holds the brand identity — logo, tagline, social icons. The right columns handle navigation. Below everything, a newsletter input spans the full width.
The newsletter input should use a <form> element with a proper action attribute or a submit handler. Never use a bare <input> without a form — screen readers and password managers rely on the <form> semantics.
4. Mega Footer with Sitemap
Large sites (e-commerce, documentation, marketplaces) need a mega footer that mirrors the full sitemap. This pattern uses five or six columns, each with 8-12 links, plus a top row with the brand and a search bar.
The key design decision: use a max-w-7xl container so the footer content doesn't stretch edge-to-edge on ultrawide monitors. The white space at the sides is intentional — it keeps the columns at a readable width.
For sites with 50+ footer links, add a subtle separator between the link grid and the bottom bar (copyright, language selector, theme toggle). A single border-t is enough.
5. Dark Footer on Light Sites
A dark footer on an otherwise light site creates a clear visual boundary — visitors instantly know they've reached the bottom. This is the most common pattern on marketing sites.
Implement it by wrapping the footer in a div with bg-neutral-950 text-white. The internal link colors switch to text-neutral-400 hover:text-white. No dark mode variants needed because the footer is always dark.
6. Minimal Footer with Centered Layout
For apps where the footer is an afterthought — dashboards, tools, internal platforms — a centered single-line footer works. Logo or app name on the left, version number on the right. Three links max.
The key is py-4 instead of py-12. A minimal footer shouldn't demand vertical space. Keep the font size at text-xs to signal that this is supplementary information.
7. Footer with Social Icons
Social links in the footer are standard for any brand presence. Use lucide-react or react-icons for consistent icon sizing. Wrap each icon in an <a> with target="_blank" and rel="noopener noreferrer".
Layout pattern: social icons sit in the top row next to the logo, or in the bottom bar next to the copyright. Never scatter them across multiple columns — visitors expect social links to be grouped.
Size the icons at 20px. Smaller than 16px becomes hard to tap on mobile; larger than 24px looks heavy in a footer context.
8. Sticky Footer (Always at Bottom)
The "sticky footer" problem: when a page has very little content, the footer floats in the middle of the viewport instead of staying at the bottom. The fix is a flex layout on the body:
<div className="flex min-h-screen flex-col">
<header />
<main className="flex-1">{children}</main>
<Footer />
</div>
The flex-1 on <main> pushes the footer to the bottom regardless of content height. This is a CSS-only solution that doesn't require JavaScript or position: fixed.
9. Footer with Language and Theme Selectors
International sites need a language selector in the footer. Place it in the bottom bar, next to the copyright. Use a <select> element or a custom dropdown — both work, but native <select> is more accessible and requires zero JavaScript.
A theme toggle (light/dark/system) also belongs in the footer as a secondary placement. The primary toggle lives in the navbar, but some users scroll to the bottom before looking for it.
10. Responsive Accordion Footer
On mobile, a footer with four or five columns of links takes up too much vertical space. The accordion pattern collapses each column behind a tappable heading. On desktop, all columns are expanded by default.
Use details and summary HTML elements for a zero-JS accordion, or useState with height animation for a smoother experience. The heading should have a chevron icon that rotates on open.
This pattern is especially useful for e-commerce footers where each column has 10+ links. Without the accordion, the mobile footer can be longer than the page content itself.
Implementation Tips
Accessibility: every footer link should have descriptive text. Avoid "Click here" or bare URLs. Use aria-label on icon-only links (social icons).
Performance: footer content is below the fold, so it doesn't affect Largest Contentful Paint. But if you're loading heavy icon libraries, consider tree-shaking or using inline SVGs.
SEO: footer links are crawled by search engines. Use proper <a> tags with href attributes — not onClick handlers that render text styled as links.
Skip the Boilerplate
Building a footer from scratch every time is tedious. The Incubator footer catalog has 15+ ready-made footer sections — multi-column, mega, minimal, dark, with newsletter, with social — all built in React and Tailwind CSS. Drop one into your project and customize the content.
Browse the full section library for headers, heroes, CTAs, and every other section your landing page needs.