React footer components

The footer is the only place on a site where you can link to everything without hurting the design. Search engines follow those links on every page, which is why a four-column footer flattens crawl depth so effectively. A page that would otherwise sit five clicks from the homepage becomes one click away. If you have documentation sections, pricing comparisons, or location pages that nothing else points at, the footer is where they get discovered.

There is a limit, though. Link equity divides across the links on a page, so a footer with ninety entries passes very little to each one. Somewhere between fifteen and forty sitewide links is the range where the crawl benefit still outweighs the dilution. Pick the pages you actually want ranking and leave the rest to your sitemap. The centered footer in this set exists for products that genuinely only have six destinations, and forcing a grid onto that site would just create empty columns.

Group links by what the visitor is trying to do rather than by your org chart. "Company", "Product", "Resources", "Legal" is a convention people can scan without reading the headings, and conventions are worth more than cleverness at the bottom of a page. Keep the legal column last. Put the newsletter field before the columns on mobile, because by the time someone has scrolled past four stacked lists they have already decided to leave.

Two implementation details cause most footer bugs. Render the copyright year with a value computed at build or request time instead of hardcoding it, or you will ship a stale date in January. And if you want the footer pinned to the bottom of short pages, use a flex column on the body with the main element set to flex-1 rather than position fixed. Fixed footers cover content on small screens and fight with iOS browser chrome.