--- title: "Footer design: anatomy, variants and examples | Kombai" description: "A footer closes every page with grouped secondary links, legal text and social links, so people can reach the rest of the site from the bottom." canonical_url: https://kombai.com/glossary/footer/ author: "The Kombai Team" --- # Footer A footer closes every page with grouped secondary links, legal text and social links, so people can reach the rest of the site from the bottom. - Also called: site footer - Platforms: Web, Mobile - In the Kombai gallery: [251 web designs](https://kombai.com/gallery/web/footer/), [34 mobile designs](https://kombai.com/gallery/mobile/footer/) - [Dispatch Grove](https://kombai.com/gallery/inspirations/footer-web-231/) (Web) - [Plinth](https://kombai.com/gallery/inspirations/footer-ios-1/) (Mobile) - [Alder & Finch](https://kombai.com/gallery/inspirations/footer-web-225/) (Web) ## What is a footer? A footer is the band at the bottom of every page of a site. It holds what the main navigation leaves out: secondary links grouped by topic, legal pages, social profiles and the copyright line. It works as a compact map of the site, so people who reach the end of a page can still go anywhere from there. - Links sit in short labeled groups, like Product, Company and Help. - A legal bar along the bottom carries the copyright, terms and privacy links. ## When to use footer - **Every page of a site.** The same footer on each page, so legal and help links are always one scroll away. - **Links that miss the navbar.** Careers, press, docs and policies people need, but rarely. - **Required fine print.** Company registration, licenses and disclosures in regulated products. ## When not to use one - **Main navigation.** Don't move key pages down here to tidy the navbar. People look for them up top. - **Inside an app screen.** Product screens use tab bars or side navigation, not a marketing footer. - **A dump of every link.** Dozens of columns turn into noise. Keep the groups short and named. ## Anatomy 1. **Brand block**: Logo and a one-line pitch 2. **Link groups**: Secondary links, grouped 3. **Social links**: Icons with text names 4. **Legal bar**: Copyright, terms, privacy 5. **States**: Link, current, folded, focus ## Variants We sorted every footer design in the Kombai gallery and found six patterns. ### 1. Link columns The default. Three to six labeled columns of links beside or under the logo, with a legal bar at the bottom. - [Underscore](https://kombai.com/gallery/inspirations/footer-web-3/) (Web) - [Kovent](https://kombai.com/gallery/inspirations/footer-web-26/) (Web) - [Flintbox](https://kombai.com/gallery/inspirations/footer-web-234/) (Web) ### 2. Giant wordmark The brand name set huge across the bottom edge, often cropped, under a small set of links. - [Groundline](https://kombai.com/gallery/inspirations/footer-web-2/) (Web) - [Pilo](https://kombai.com/gallery/inspirations/footer-web-27/) (Web) - [Ovilla](https://kombai.com/gallery/inspirations/footer-web-28/) (Web) ### 3. With a newsletter signup An email field sits in the brand column or its own block, sometimes with a discount for signing up. - [Lowdeck](https://kombai.com/gallery/inspirations/footer-web-9/) (Web) - [Cinderpost](https://kombai.com/gallery/inspirations/footer-web-226/) (Web) - [Verdure](https://kombai.com/gallery/inspirations/footer-ios-2/) (Mobile) ### 4. Closing call to action A last pitch with a button, in a card or a band, right above the links. - [Footprint](https://kombai.com/gallery/inspirations/footer-web-10/) (Web) - [Timbre](https://kombai.com/gallery/inspirations/footer-ios-8/) (Mobile) - [Tradewell](https://kombai.com/gallery/inspirations/footer-ios-10/) (Mobile) ### 5. Contact footer Studios and agencies lead with a big line like "Have a brief?", an email address and a few links. - [Bracken Works](https://kombai.com/gallery/inspirations/footer-web-229/) (Web) - [Daybreak Office](https://kombai.com/gallery/inspirations/footer-web-237/) (Web) - [Cornerstone](https://kombai.com/gallery/inspirations/footer-ios-4/) (Mobile) ### 6. Minimal footer A logo, a handful of links and the copyright, for small sites and single products. - [Draftwell](https://kombai.com/gallery/inspirations/footer-web-19/) (Web) - [Solvane](https://kombai.com/gallery/inspirations/footer-web-30/) (Web) - [Nimblist](https://kombai.com/gallery/inspirations/footer-ios-20/) (Mobile) ## Where footers show up ### Product sites Deep columns for product, resources and company pages, often with status and social links. - [Aura](https://kombai.com/gallery/inspirations/footer-web-250/) (Web) - [Nevara](https://kombai.com/gallery/inspirations/footer-web-24/) (Web) - [Jorvo](https://kombai.com/gallery/inspirations/footer-web-22/) (Web) ### Regulated products Banks, cards and wealth managers carry license lines, disclosures and footnotes under the links. - [Endnote](https://kombai.com/gallery/inspirations/footer-web-12/) (Web) - [Morrowcard](https://kombai.com/gallery/inspirations/footer-web-233/) (Web) - [Copperline](https://kombai.com/gallery/inspirations/footer-web-248/) (Web) ### Online stores Shop, help and store links, with a signup offer for a first order. - [Solmere](https://kombai.com/gallery/inspirations/footer-web-227/) (Web) - [Merrywell](https://kombai.com/gallery/inspirations/footer-web-242/) (Web) - [Kubbly](https://kombai.com/gallery/inspirations/footer-ios-12/) (Mobile) ### Legal and help pages Terms and privacy notices that end in a short footer of related policies and contacts. - [Halfmoon](https://kombai.com/gallery/inspirations/footer-ios-17/) (Mobile) - [Kestrel](https://kombai.com/gallery/inspirations/footer-ios-25/) (Mobile) - [Halcyon](https://kombai.com/gallery/inspirations/footer-ios-9/) (Mobile) ## Footer vs similar components | | [Footer](https://kombai.com/glossary/footer/) | [Navbar](https://kombai.com/glossary/navbar/) | [CTA band](https://kombai.com/glossary/cta-band/) | [Newsletter signup](https://kombai.com/glossary/newsletter-signup/) | |---|---|---|---|---| | Sits | At the bottom of every page | At the top of every page | Before the footer, once | Anywhere, often in the footer | | Holds | Secondary links, legal, social | Main links and one action | One message and one button | An email field and a button | | Best for | Reaching everything else | Moving between main sections | A last push to sign up | Growing a mailing list | ## Build notes - Use a page-level