Footer

Overview

Description

A footer component is a consistent section at the bottom of a web page that provides navigation, contact information, legal notices, and brand elements to enhance user experience and reinforce site credibility.

Key features

Common features of footers include the copyright notice, site map, links to key pages, social media icons, contact details, and privacy policies. A well-designed footer acts as a fallback for users, offers secondary navigation, and provides a sense of completion to the site’s design.

Uses

  • Branding: logo and company name.
  • Navigation: site map, links to key pages, and “doormat” or secondary navigation.
  • Contact & engagement: contact information, a map, social media icons, and newsletter sign-up forms.
  • Calls to Action (CTAs): prompts for specific actions, like signing up for a newsletter or downloading an app.
  • Legal & copyright: copyright notices, privacy policies, terms and conditions, and return policies.
  • Social proof: testimonials, awards, or certifications.
  • Utility: language selectors, app store badges, or a light/dark mode switch.

Value to user

  • Navigation: footers contain links to important and often elusive pages like the sitemap, contact page, or legal policies that are not easily found in the main navigation.
  • Information hub: They provide essential information such as copyright, company details, and contact information.
  • Credibility & professionalism: including legal notices, certifications, and brand elements in the footer enhances trust and professionalism.
  • User guidance: by providing a clear end to the page, a footer gives visitors a sense of completion and can direct them to further actions or information.

Best Practices

  • Consistency: the footer should be a consistent element across all pages, integrating seamlessly with the overall design.
  • Usability: prioritize providing useful, expected information over purely decorative elements.
  • Organization: group related links and information into logical columns or sections for clarity.
  • Clarity: make sure the links and content are easy to read and understand.

Accessibility Notes

  • Use “footer” semantic tag
  • Ensure focus includes footer links

Examples

Default footer

All footers

Can’t find what you’re looking for? Get in touch