Skip to main content
An official website of the United States government

Footer

The footer can be found at the bottom of all pages on the website. Footers contain similar information on most websites and serve as a utilitarian page element for users to find information such as links to important sections of the site, a copyright notice, privacy policy, social media links, and contact information.

View in Figma

Overview

Example of a footer with main navigation links, an email sign up form, secondary navigation links, social media icons, and contact information.
  1. Section Heading
  2. Link
  3. Subscription Call-to-Action
  4. NCI DOC Name
  5. Contact Information
  6. Social Media Icons
  7. Back to Top

Usage

  • Curate your footer. Footer links should point to popular content that might answer a visitor's remaining questions.
    • If you have several links, group similar items together under a topic label, such as About, Resources, Policies.
  • Do not replicate the main navigation in the footer.
  • Include newsletter signup, particularly if one of your website's goals is getting visitors to sign up for a newsletter.
  • Avoid stale social media accounts. Link to social media accounts only if they are updated frequently or used to communicate with your audience(s).
  • Include standard information like contact information, disclaimers, and legal content. While you'll want to limit the amount of legal content on your footer, it is standard practice to include this information in your footer— therefore, users will know to head to your footer if they are in search of this information.
  • Limit contact information to email and phone. Include clickable links for your email and phone numbers.
  • Write short, actionable link titles.
    • When calling on users to take a specific action, lead your button text labels with a verb. Button label text should be as short as possible with action words that clearly explain what will happen when the button is selected (e.g., Contact us, Sign up, etc).
    • When pointing to informational pages, include a succinct version of the page name within the link title.

Where to use

  • Use a footer at the bottom of all pages on the website.

When to use

  • Use the footer when including more than five links in your footer.
  • Use the footer when you want to replicate your site's navigation scheme in the footer and offer newsletter signups.

When to consider something else

  • Highlighting your website's main site structure.
    • Alternative: Introduce users to your website's hierarchy and structure with your header, not your footer
  • Featuring important promotional content.
    • Alternative: Use components like the promo block to entice users to take a specific action when highlighting content marketing materials.

Best Practices

Character Limits

  • Link text: 30 characters maximum (recommended)

Image guidance and specs

  • Only use approved social media icons from the design system
    • Social media icons may vary for English and Spanish

Accessibility

  • Use tab focus. Code the navigation so that pressing the tab key moves focus from link to link in the navigation, even when the navigation has collapsed into an accordion.
  • Use accessible accordions. On small screens: when collapsed into an accordion, the navigation should also meet the accessibility requirements outlined in the “Accordion” section.
  • Aria-Labels provide an accessible name for an element. If there is no visible name for the element, use aria-label to provide the user with a recognizable accessible name.
English labelSpanish label
{Number} suggestions found, use up and down arrows to review{Number} sugerencias automáticas. Use flecha arriba o flecha abajo para escuchar las opciones.

The list of suggestions has a role of listbox so that the screen reader is informed that it contains a list of selectable items.

Keyboard navigation

English LabelSpanish Label
FooterPie de página
Footer navigationPie de página de navegación
Back To TopVolver Arriba
SubscribeSuscríbase

Code Snippets

Default footer

To enable the default JavaScript interactions you must add import import '@nciocpl/ncids-js/components/usa-footer/nci-big/auto-init'; to the top of your JavaScript file.

If you need to customize the nci-footer, visit the ncids-js documentation site for more information on developing your own custom JavaScript.

Component Preview

Packages

Import this Sass partial into your stylesheet.

@forward "usa-footer";
/* These packages should also be imported in your sass stylesheet if not already for NCI Big footer as it is dependent on them. */
@forward "usa-button";
@forward "usa-form-group";
@forward "usa-input";
@forward "usa-error-message";