Header vs footer: the surface that does the work

When founders build their first navigation, the temptation is to put everything in the header. About, Contact, Pricing, Blog, Help, Login, Sign Up, Features, Use Cases, Company, Legal — twelve links jammed into a horizontal bar that's already crowded with a logo and a search box.

This is the wrong shape. It's not because there are too many links (although there are). It's because header and footer do different jobs, and most of those links belong in the footer, not the header.

The principle

In modern web design, the header is the working surface — the things the user does on this site. The footer is the reference surface — the things they need to know exist but aren't doing right now.

The decision rule:

If the user is more likely to need it once than to use it daily, it belongs in the footer.

About? Once. Footer.

Contact? Once. Footer.

Sign in? Used every visit. Header.

The product's main feature? Used every visit. Header.

This separation came from years of usability research showing that users develop strong expectations about where to find different categories of information. Working tools = top. Reference info = bottom. Violating the expectation slows users down even when the link is technically discoverable.

What goes in the header

Three things, in this order:

1. Logo + wordmark, clickable home. Universal. The logo always returns to the home page.
2. 2–5 primary product surfaces. The things the user does on this site. For a SaaS: "Discover," "Library," "Create." For a marketplace: "Browse," "Sell," "Orders." For a blog with a product: "Posts," "Tools," "Subscribe."
3. Account on the right. Sign in button when signed out, avatar with dropdown when signed in.

That's it. Never more than 5 product surfaces — past five, the user can't scan the bar at a glance and they revert to looking at the page content for navigation cues.

Notably absent from the header:

• About — once-and-done content. Footer.
• Contact — once-and-done. Footer.
• Blog — unless the blog is core to the product (a media company), this is once-and-occasionally. Footer.
• Pricing — debatable. If you're actively selling, header. Otherwise footer.
• Legal — never in the header. Footer.

What goes in the footer

Everything else, organized loosely:

Company

• About
• Contact (or mailto:hello@your-domain.com)
• Blog (if it exists)
• Press / Newsroom (if you have any)

Product

• Docs
• Changelog
• Status page
• Roadmap (if public)

Legal

• Terms of Service
• Privacy Policy
• "Do Not Sell or Share My Personal Information" (CCPA)
• Cookie policy (if separate)
• Acceptable use

Social

• Optional. Only if the brand has a real presence on each platform.

Copyright

• One line at the bottom: © 2026 Your Company. All rights reserved.

The "skinny header" pattern

Look at any well-designed app you use daily. Linear's header has a logo, four nav items, and an avatar. Notion's header has a logo, a search bar, and a single "Sign in" button. Stripe's header has a logo, four product nav items, and a "Sign in" / "Contact sales" pair.

None of them have About in the header. None of them have Contact. All of them have those things in the footer or on a "Company" page linked from the footer.

The skinny header is not a stylistic choice. It's a load-balancing choice — the header is reserved for the actions a daily user reaches for, and everything else gets out of the way.

The "fat footer" pattern

The footer takes the load. Stripe's footer is enormous — five columns of links covering Products, Use Cases, Resources, Company, Developers. This isn't visual noise; it's where everyone stashes the things they need to be discoverable but don't want crowding the working surface.

A typical MVP footer doesn't need five columns. Two or three is plenty:

[Logo + wordmark]      About    Contact    Blog
                       Terms    Privacy    Do Not Sell

© 2026 Your Company. All rights reserved.

That's twelve links in a footer that takes one screen-third. None of them crowd the working area.

What about marketing sites?

Marketing sites (the page someone lands on before they sign up) do skew slightly different. They often need:

• A primary "Get started" CTA in the header (yes, that's a working action — they're trying to get the user to sign up).
• A "How it works" or "Features" section linked from the header (the working action is "learn what this is").

But even on a marketing site, About and Contact and Pricing-deep-content go in the footer. The header stays focused on getting the user to act.

The rule for vibecoded products

The Vibe Coder's Guide skills (sub-skill 02 design) bake this in as a hard rule:

Header (nothing except):

• Logo + wordmark, clickable home.
• 2–5 primary product surfaces.
• Account / auth on the right.

Footer (everything discoverable but non-essential):

• About, Contact (or a /contact form, or just hello@<domain>).
• Terms, Privacy, "Do Not Sell or Share."
• Social links (optional, only if the brand has a real presence).
• Docs, changelog, press (only if they exist).
• Copyright.

Following this rule means your AI agent automatically ships an MVP with the right information architecture, without you having to know what good IA looks like.

The trap to avoid

The instinct, especially for a founder, is to put everything in the header because "people might miss it otherwise."

People will not miss it. People scroll. People know to check the footer for About and Contact. The thing they will miss is the primary product surface if it's buried among twelve other links.

Reserve the header for what matters daily. Trust the footer to hold the rest.

← All posts