Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Footer

A footer serves site visitors who arrive at the bottom of a page without finding what they want.

This component is not officially supported

This component has not yet been built as a component in the Design System. Thus the Design System Team does not officially support this component. The Footer - Minimal variation is supported. Guidance and design assets are provided as is.

Examples

Default

The VA.gov header at mobile viewport width.
At mobile viewport width for unauthenticated users the VA.gov footer collapses the navigation into accordions.
The VA.gov footer at desktop viewport width.
At desktop viewport width for unauthenticated users the VA.gov footer exposes navigation sections and language assistance.

Usage

  • The footer is required to provide additional navigation. Navigation helps users find the information they need across all of VA.gov.

How this component works

The footer is made up of four parts:

  1. Crisis Line Modal. The Veterans Crisis Line modal is a button prominently placed over the footer at mobile viewport widths. When interacted with it opens a modal window.
  2. Navigation. At mobile the navigation is collapsed into accordions.
  3. Identifier. This portion of the footer holds the VA logo, agency badge, title, and required links. While our version pre-dates the USWDS component of the same name, it provides roughly the same information.

Behavior

  • BEWARE! The footer is injected on all pages of VA.gov. It is important for teams working on the footer to be aware that the footer is injected across different Content Management Systems at the VA. Here are some important things to keep in mind when working on the footer:
    • The footer is not currently a web-component supported by the Design System Team. Instead, it is a shared global React component with logic onto itself.
    • Web components do not currently load in Microsoft TeamSites, one of the Content Management Systems that the footer is injected into.
    • The Sitewide team owns the design of the footer while the Design System Team owns the code of the footer going forward. Thus the Design System Team is currently building out the web-components and will be working with other teams to support web-components in TeamSites.

Choosing between variations

  • Use the Footer - Minimal variation for use cases where navigating away would prevent the user from easily accomplishing their main task. We use the minimal footer variation when we want to guide the user to task completion and where navigating away from the current task would be counter-productive or potentially lose user input. For example, a form flow is a use case where we want to help the user get through filling out the form without interruption.

Placement

  • At the bottom of every page. The footer appears at the bottom of every page within the va.gov domain, but not all sub-domains.
Edit this page in GitHub (Permissions required)
Last updated: Dec 12, 2023