Components
Footer
A footer serves site visitors who arrive at the bottom of a page without finding what they want.
Passed WCAG 2.1 AA
Guidance
When to use the footer component
- Big footer: Use the big footer when you want to replicate your site’s navigation scheme in the footer and offer newsletter signups.
- Medium footer: Use the medium footer when you want to offer only a few footer links (for disclaimers, terms of service, etc.), social media icons, and contact information.
- Slim footer: Use the slim footer when you only want to offer a few footer links and nothing else.
When to consider something else
- Medium and slim footers: Use the big footer when your footer has more than five links.
Usability guidance
- Curate your footer. Footer links should point to popular content that might answer a visitor’s remaining questions. Links to disclaimers and legal content sometimes need to be in the footer, but try to minimize “disclaimer bloat” wherever possible.
- The footer doesn’t need to mirror the header. Link grouping in the footer does not have to mirror link grouping in top level header navigation (especially if the navigation offers many more links than the footer can).
- Include newsletter signup. Include the newsletter signup if one of your website’s goals is getting visitors to sign up for a newsletter.
- Avoid stale social media accounts. Link only to social media your agency updates frequently or uses to communicate with customers.
- Limit contact information to email and phone. Important contact information should be limited to general email or phone numbers, which should be clickable links to dial from a mobile phone. Physical addresses should live on contact pages users can navigate to from the accordion links.
Accessibility guidance
- 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.
Using the footer component
Footer settings
| Variable | Description |
|---|---|
$theme-footer-font-family
|
Font family of the footer. |
$theme-footer-max-width
|
Maximum width of footer container. |
Footer variants
| Variant | Description |
|---|---|
|
|
A multi-column footer that expands and collapses on mobile. |
|
|
A compact version of the footer. |
Accessibility test status
The USWDS team did 15 tests based on WCAG 2.1 AA success criteria.
| Total tests |
Passed
|
Passed with exceptions
|
Conditional
|
Failed
|
|---|---|---|---|---|
| 15 | 13 | 0 | 2 | 0 |
Overview of recent accessibility test results:
Learn more on the footer accessibility tests page.
Package
-
Package usage:
@forward "usa-footer"; - Dependencies:
uswds-fonts,usa-layout-grid,usa-input,usa-form,usa-label,usa-list,usa-button,usa-icon
Latest updates
Meaningful code and guidance updates are listed in the following table:
| Date | USWDS version | Affects | Description |
|---|---|---|---|
| 2024-10-04 | 3.9.0 |
|
Added the |
| 2024-08-13 | N/A |
|
Added WCAG compliance tag and accessibility test status section. More information: uswds-site#2760 |
| 2024-05-31 | 3.8.1 |
|
Restored the |
| 2024-03-11 | 3.8.0 |
|
Fixed a bug that caused some grid utility classes to be ignored when used inside |
| 2023-12-08 | 3.7.1 |
|
Removed the |
| 2023-12-08 | 3.7.1 |
|
Adjusted the right alignment of footer elements. Footer content should now align with other page elements. More information: uswds#5234 |
| 2023-11-09 | 3.7.0 |
|
Restored underlines to footer links in the default state. Now, footer links meet WCAG 2.0 AA requirements. More information: uswds#5588 |
| 2023-03-09 | 3.4.0 |
|
Footer now accepts any heading level for primary link headers.
Use any heading level for |
| 2022-08-29 | N/A |
|
Added documentation for |
| 2022-08-05 | 3.1.0 |
|
Breaking Added unmodified social media icons. We now provide simpler social media icons, and removed any decoration not in the original icon. This means that the new icons are not in an enclosing circle unless the original icon is enclosed in a circle. More information: uswds#4872 |
| 2022-04-28 | 3.0.0 |
|
Breaking Updated to Sass module syntax and new package structure. More information: uswds#4656 |
| 2022-04-11 | 2.13.3 |
|
Added more accessible disclosure buttons to the big footer variant. Now the big footer variant uses more accessible disclosure buttons for showing and hiding submenus at mobile widths. More information: uswds#4476 |
| 2022-04-11 | 2.13.3 |
|
Added support for forced colors mode. All our components now support proper display when users have a forced colors mode set in their operating system. More information: uswds#4610 |
| 2022-03-07 | 2.13.2 |
|
Fixed expanded display in the big footer variant. Fixes an issue where the big footer variant does not show the proper expanded display at exactly 480px. More information: uswds#4525 |
| 2021-12-14 | 2.13.0 |
|
Breaking Improved resilience of icon-only functionality. We updated a couple components that use icon-only buttons so that they provide a text equivalent if the image path is broken and does not load. More information: uswds#4211 |
| 2021-03-17 | N/A |
|
Updated and improved guidance for footer. More information: uswds-site#1180 |
