Home / Navigation / Footer Mega-Menu
4.13 · Navigation

Footer Mega-Menu.

The sprawling sitemap footer. Brand block + newsletter + 4 columns of links + social row + status indicator + legal. The Stripe / Vercel / Linear pattern.

What it is

The catch-all bottom-of-site navigation that exposes every secondary destination — pricing, docs, changelog, careers, customers, blog, legal, status page, social. Replaces both the limited top nav and a separate sitemap page. Usually 4–6 columns plus a brand/newsletter block, finished with a row of legal links, social icons, and a live system-status indicator.

How it works

Outer container uses CSS Grid with one wide brand column and 4 narrow link columns (grid-template-columns: 2fr 1fr 1fr 1fr 1fr). Each link column has a small uppercase mono header and a stacked list of muted links. The brand column holds the logo, a one-line product description, and a newsletter form. Below the grid: a hairline divider, then a flex row with copyright + legal links on one side and social icons on the other. A green-dot "All systems operational" indicator next to the copyright links to the status page.

2fr 1fr×4 gridBrand block wider than each link column — proven Stripe/Vercel layout
Uppercase mono headersColumn labels in mono caps differentiate from link rows
Newsletter inlineEmail input + button inside the brand block — captures intent at exit
Status indicatorGreen dot + "all systems operational" — link to the public status page

Live demo

Live
Aurora

The quiet workspace. Made by five operators in Brooklyn.

Product
  • Features
  • Pricing
  • Changelog New
  • Integrations
  • Roadmap
  • Download
Resources
  • Documentation
  • Guides
  • API reference
  • Help center
  • Templates
  • Community
Company
  • About
  • Customers
  • Manifesto
  • Careers 7
  • Press kit
  • Contact
Legal
  • Privacy
  • Terms
  • Security
  • DPA
  • Cookies
  • Subprocessors
All systems operational
© 2026 Aurora Inc. Privacy Terms Cookies

Copy this prompt

Prompt · 4.13 Footer Mega-Menu
Build a comprehensive footer mega-menu. Dark background (#0E0E14). Outer CSS Grid: grid-template-columns:2fr 1fr 1fr 1fr 1fr, gap:40px, padding-bottom and hairline border-bottom. (1) BRAND COLUMN (wide): large brand name in display serif with a glowing accent dot before it, one-line product description (max 32ch muted text), and a horizontal newsletter form (email input + accent-colored "Subscribe" button). (2) FOUR LINK COLUMNS each with: a small uppercase mono header in muted color, then a vertical list of 6 link items. Some items have an accent-colored "New" or count badge (e.g., "Changelog [New]", "Careers [7]"). Hover on links shifts color from muted-white to pure white. Below the grid: a hairline divider, then a flex row with: a green "All systems operational" pill on the left (small green glowing dot + text), copyright + legal links in the middle, and 4 social-icon circles on the right (X, GitHub, LinkedIn, YouTube — each is a 32px round button with 1px border that turns accent color on hover). Mobile: collapse to 2 columns under 900px, 1 column under 600px.

Example sites to study