A mega footer is a full-width, multi-column site footer that consolidates navigation, legal links, brand identity, social links, and a newsletter sign-up in one structured section. It is a staple of SaaS product sites, developer tools, e-commerce platforms, and marketing pages — and a frequently-searched component because getting the layout right across column counts and screen sizes requires careful grid design. This snippet provides a complete mega footer with a brand and social column, four navigational link columns, a newsletter input, a language selector, and a responsive bottom bar.

The two-zone layout

The footer splits into two horizontal zones: a wide brand column on the left (brand logo, description, social icons, newsletter) and a four-column link grid on the right. This is achieved with a CSS grid of grid-template-columns: 340px 1fr — a fixed brand column and a fluid link area. The link grid inside uses grid-template-columns: repeat(4, 1fr) for equal-width columns. Both grids collapse gracefully: at 900px the footer stacks brand above links; at 520px the four link columns become a 2×2 grid.

Brand column

The brand section contains a logo mark (emoji swappable for an SVG), a company name in bold, a short tagline description, social icon buttons, and a newsletter input row. Grouping all brand-level content in the first column follows the standard mega-footer convention and ensures the most important "who we are" information is always visible without scrolling the link columns.

Social icon buttons

Social links use inline SVG icons (Twitter/X, GitHub, LinkedIn) inside square icon buttons. Inline SVGs ensure they load with the page, scale perfectly at any size, and can be recoloured with CSS color. The buttons have a dark background that lightens on hover, providing visible interactivity without bright colour.

Newsletter form

The newsletter subscribe() function validates the email client-side before submission, shows a green confirmation message, and disables the input and button to prevent re-submission. In production this POSTs to an email service endpoint (Mailchimp, ConvertKit, Resend, or a custom API).

Hiring badge and contextual labels

The Careers link in the Company column has a green "Hiring" badge — a small detail that drives qualified candidates directly from the footer and saves the marketing site team from building a separate recruitment banner. Contextual badge patterns like this are easy to add to any link.

Bottom bar

The footer-bottom row contains the copyright notice, Sitemap and Accessibility links, and a language selector. These bottom-bar elements are separated from the main footer content by a border-top and kept in a flex row that wraps on small screens.

Step by step

How to Use

1
Replace the brandSwap the ⚡ emoji for your logo SVG, update the brand name, and edit the description tagline to match your product.
2
Update the link columnsEdit the four link column sections (Product, Developers, Company, Legal) to match your site's navigation structure. Add or remove columns by adjusting the grid-template-columns value.
3
Connect social linksReplace the # hrefs with your actual Twitter, GitHub, and LinkedIn URLs. Add or remove social buttons by duplicating or deleting .social elements.
4
Wire the newsletterIn subscribe(), POST the validated email to your mailing list endpoint. The form already handles disabling after submit and showing a confirmation.
5
Update the copyright and language optionsChange the year and company name in the copyright line. Update the language dropdown options to match the locales your site supports.
6
Export for your frameworkClick "React" for a component with the newsletter form in useState. Click "Vue" for a Vue 3 SFC with reactive form state.

Real-world uses

Common Use Cases

SaaS product and developer tool marketing site

The mega footer is the standard footer pattern for B2B SaaS and developer tool sites. The four link groups cover Product, Developers, Company, and Legal — the four navigation pillars most SaaS products need. The brand column provides SEO-relevant descriptive text and social signals in a location search engines expect to find authoritative content.

E-commerce site with department navigation

Adapt the four link columns to e-commerce categories, customer service links, loyalty programme links, and store policies. The newsletter form captures email subscribers at the bottom of every page, typically achieving higher conversion rates than pop-ups because the intent is self-selected.

Render link columns from a navigation config

Replace the hardcoded anchor lists with a data-driven rendering: keep link groups as a JavaScript array of { heading, links[] } objects, and map over them to generate the columns. This makes the footer manageable via a single config file or a CMS, so marketing can update links without touching the component.

Documentation site footer with quick-access links

Developer documentation sites (Stripe, Twilio, Vercel) use mega footers to link to key API references, SDKs, guides, and community resources. The Developers column is pre-populated with the right categories: API Reference, SDKs, Webhooks, CLI — making it immediately usable for a dev-tool docs site.

Study responsive grid and footer layout patterns

The footer uses two nested CSS grids: the outer for brand-vs-links and the inner for the four link columns. The responsive collapse uses a media query to switch both grids to single-column and 2×2. This is a canonical example of nested grid layout and responsive column collapsing that transfers to any multi-column content structure.

Newsletter acquisition at the bottom of every page

Placing a newsletter form in the footer puts email capture on every page of your site without the conversion-rate cost of a pop-up or the maintenance of dedicated landing pages. The subscribe function is a drop-in for any email marketing API, making this the lowest-friction path to growing a subscriber list.

Got questions?

Frequently Asked Questions

Change .link-cols { grid-template-columns: repeat(4, 1fr) } to repeat(5, 1fr) or repeat(6, 1fr). You may also need to narrow the brand column (from 340px to 280px) in the footer-inner grid to give the link grid more space. On mobile, the existing 2-column responsive breakpoint at 520px still works — extra columns just wrap into more rows.

Replace the ⚡ text inside .brand-logo with an <svg> or <img> element. Set the SVG to width: 20px; height: 20px (or the natural aspect ratio) and fill: white for a white icon. The .brand-logo container already handles the size (34×34px) and background gradient, so the logo just needs to fit inside it.

In subscribe(), after validation passes, POST to your provider's API endpoint. For Mailchimp, POST to their /3.0/lists/{listId}/members endpoint with Authorization: apikey {key}. For ConvertKit, POST to their /v2/forms/{formId}/subscribe endpoint with api_key and email. Both APIs are CORS-restricted so the POST should go through a proxy (a serverless function or Next.js API route) rather than directly from the browser.

Create a Footer component that accepts optional linkGroups and socialLinks as props (or hardcodes them as constants). Keep nlEmail and nlStatus in useState for the newsletter form. The link groups render from an array.map() — { heading, links: [{label, href}] }. The bottom bar is a separate div with the copyright string (derived from new Date().getFullYear()) and a static language select. The component has no side effects and no API calls, so no useEffect is needed. For the Tailwind version, click "Tailwind" to get the same markup with utility classes instead of a scoped stylesheet.

Loading…