Footer

Footers should be placed at the bottom of every page on a website or an application; below the main body content.

A footer component is helpful for information heavy sites as it can offer quick access to more rarely visited areas of the site that may not be present in the global navigation. Items such as terms of use, accessibility and contact information as well as complete navigation that may include all top and second-level pages typically reside in site footers.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Structure and layout

Demo

Configure: select the dropdowns below to display the variety of options that a footer supports.

Usage best practices

Common footer elements include:

  • utility links: typically contain contact information, customer support information, privacy policy, terms of use, etc
  • secondary tasks: tasks that are not directly related to the main purpose of the site i.e. links to careers information, media kits and other PR information, etc.
  • site map: showcases top level and some lower level pages to expose underlying topics, increase awareness of the site's primary content, and remind users of the organization's offerings

Where footer has delicate screen real estate, be sure to:

  • understand your information architecture and content priority 
  • highlight top and selective lower level pages
  • use groupings and group labels to make footer scannable 

Do

Display links to only first- and second-level categories in the site's IA.

Use clear terms for footer items, such as using "contact us" versus "help".

Convey the information hierarchy of the footer items by using grouping or other visual-design patterns that indicate visual hierarchy.

Ensure that colour contrast in the footer is optimal to ensure legibility and accessibility.

Add footer to pages that use infinite scrolling.

Don't

Do not include the entire site map unless the site contains less than 25 pages.

Do not use footer as a “dumping ground” for orphaned links which have no relation to the global navigation or to secondary tasks.

Do not use illegible font sizes for footer items.

Do not hide the footer.