Skip to main content

Footer

Last updated:
1/25/2024

The footer lives at the bottom of the page and contains company branding, legal text and links, and copyright information. It can also contain navigational links, social media links, or cookie customization.

View in Storybook
See example

Modifiers

Simple

The simple footer modifier has no navigational links.

See simple

Intermediate

The intermediate footer modifier has navigational links that aren’t sorted into groups. There must be at least one navigational link added to use this modifier.

This modifier is generally used for doormat navigation or secondary task links, such as applying for a job, finding investor information, or accessing customer support.

See intermediate

Complex

The complex footer modifier has navigational links that are sorted into groups. These navigation groups are usually defined by the website’s information architecture. There must be at least one navigation group added to use this modifier.

This modifier is generally used for a sitemap type footer navigation, where the groups correspond to sections within the website and navigational links point to pages within those sections. If there are too many pages to surface within the footer, overflow links can be used to point to the navigation group’s landing page.

This modifier can also be used to group research-derived links into easily scannable sections.

See complex

Usage

The footer appears at the bottom of the page. It is comprised of at least the website’s logo and copyright information. More elements may be required depending on page content or product times.

Navigational links and groups can be organized by matching the existing primary navigation structure, surfacing the doormat navigation (such as the website’s primary landing pages), elevating secondary tasks (such as job search or investor information), or a combination of all three.

The following elements can be combined within the footer depending on the experience’s needs.

Required items

The company logo and the copyright information are always required, but more elements may be required, depending on page or website content.

If your page contains device information, it’s required to add a brief summary link either within the content or in the footer. The brief summary is usually referred to as “Indications, safety, and warnings.”

All pages of a site that contains device content require a link allowing the user to contact Boston Scientific in the event they need to file a complaint. The link usually goes to a customer support page or portal.

If Boston Scientific is the distributor of a given product, legal language is required to state who the manufacturer is. Some products require a modern slavery statement, for example, products acquired through acquisition. A modern slavery statement states the actions an organization has taken during the financial year to ensure that slavery or human trafficking is not taking place within the organization.

Please reach out to the legal and regulatory team for any questions related to required statements and links.

Navigation group

A group of navigational links. The groups are usually determined by the website’s information architecture. Grouped links should be related in some way. Navigation groups are organized into columns and then collapse into accordions as the viewport narrows.

There is no restriction to the number of links that can be added to a group, we recommend adding an overflow link when there are more than five to seven links.

Links within the website’s domain. These links can be determined by the website’s primary navigation, frequently visited pages, or a combination of the two. Navigation links are organized into columns and then stack as the viewport narrows.

There is no restriction to the number of links that can be added to a group, we recommend adding an overflow link when there are more than five to seven links.

An overflow link can be added at the bottom of a navigation group or a column of navigational links if there are more than five to seven links. The overflow link should direct the user to a common landing page for the navigation group.

Legal, privacy, or compliance navigation

This section includes, but is not limited to, links to pages such as:

  • Privacy policy
  • Terms of use
  • Copyright notice
  • Slavery statement
  • Social media guidelines
  • Sitemap
  • Accessibility statement

These links are all dependent on the needs of the website, but having a sitemap page is highly recommended.

The company logo. The logo will always be the Boston Scientific logo. The logo should always be an SVG. The alt text should read “Boston Scientific” and should not include “logo” or “home”.

Boston Scientific home site link

An external link that directs the user to the Boston Scientific corporate site home page. Don’t add this option to the corporate site.

Company tagline

Non-actionable company tagline text.

Social media platforms include Facebook, Twitter, LinkedIn, YouTube, and Instagram. The links will direct the user to Boston Scientific accounts by default. Sub-brand or co-branded properties can change the accounts to their own, if necessary. Don’t add links to social media platforms that Boston Scientific doesn’t have an account on.

Cookie customization

The action to customize website cookie options. Don’t add this option to websites that don’t have cookies.

Control number

The control number assigned to content approved through the Promotional, Educational, Sales Support, and Training (PSST) process. This number is required to be shown on all PSST material.

The copyright protects the intellectual property of Boston Scientific. Showing the copyright is required.

Do:

  • Use an SVG for the logo images
  • Organize related navigational links into groups
  • Use an overflow link if there are more than five to seven links within a group or column
  • Add control number if the content is subject to the PSST process

Don't:

  • Add any optional items that aren’t necessary
  • Add more than seven links to a group or column
  • Add the Boston Scientific home site link on the corporate site
  • Add a customize cookies action if the website has no cookies manager
  • Remove the copyright
  • Remove the footer

Content guidelines

Do:

  • Match the navigation item text with its corresponding page’s breadcrumb text and h1
  • Write in sentence case
  • Name groups and overflow links clearly and distinctly

Don't:

  • Change wording from the shared footer options

User research

Key takeaways

  • Have a clear structure with clear naming
  • Stick to one level of navigation
  • Avoid recreating the primary navigation within the footer
  • Understand that footers can be the last chance at catching the user
    • Consider using analytics to discover common search queries or frequently visited interior pages and adding these frequently visited links to the footer

No sources

Nielsen Norman Group — Footers 101: Design Patterns and When to Use Each Medium — Website Footer: Best practices and what to avoid

Accessibility

This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards and content guidelines to ensure that this component is fully accessible.

For more information, see the WAI-ARIA Authoring Practices for navigation and Deque’s screen reader keyboard shortcuts and gestures documentation.