Components

Footer

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

<h3 class="site-preview-heading" id="big-footer">Big footer</h3>

<footer class="usa-footer usa-footer--big">
  <div class="grid-container usa-footer__return-to-top">
    <a href="#">Return to top</a>
  </div>
  <div class="usa-footer__primary-section">
    <div class="grid-container">
      <div class="grid-row grid-gap">
        <div class="tablet:grid-col-8">
          <nav class="usa-footer__nav" aria-label="Footer navigation,,">
            <div class="grid-row grid-gap-4">
              <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
                <section
                  class="
                    usa-footer__primary-content
                    usa-footer__primary-content--collapsible
                  "
                >
                  <h4 class="usa-footer__primary-link">&lt;Topic&gt;</h4>
                  <ul class="usa-list usa-list--unstyled">
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);"
                        >&lt;Secondary link that&#039;s a bit longer than most
                        of the others&gt;</a
                      >
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                  </ul>
                </section>
              </div>
              <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
                <section
                  class="
                    usa-footer__primary-content
                    usa-footer__primary-content--collapsible
                  "
                >
                  <h4 class="usa-footer__primary-link">&lt;Topic&gt;</h4>
                  <ul class="usa-list usa-list--unstyled">
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);"
                        >&lt;Secondary link that&#039;s pretty long&gt;</a
                      >
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                  </ul>
                </section>
              </div>
              <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
                <section
                  class="
                    usa-footer__primary-content
                    usa-footer__primary-content--collapsible
                  "
                >
                  <h4 class="usa-footer__primary-link">&lt;Topic&gt;</h4>
                  <ul class="usa-list usa-list--unstyled">
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                  </ul>
                </section>
              </div>
              <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
                <section
                  class="
                    usa-footer__primary-content
                    usa-footer__primary-content--collapsible
                  "
                >
                  <h4 class="usa-footer__primary-link">&lt;Topic&gt;</h4>
                  <ul class="usa-list usa-list--unstyled">
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="javascript:void(0);">&lt;Secondary link&gt;</a>
                    </li>
                  </ul>
                </section>
              </div>
            </div>
          </nav>
        </div>
        <div class="tablet:grid-col-4">
          <div class="usa-sign-up">
            <h3 class="usa-sign-up__heading">Sign up</h3>
            <form class="usa-form">
              <label class="usa-label" for="email" id=""
                >Your email address</label
              >
              <input class="usa-input" id="email" name="email" type="email" />
              <button class="usa-button" type="submit">Sign up</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="usa-footer__secondary-section">
    <div class="grid-container">
      <div class="grid-row grid-gap">
        <div
          class="
            usa-footer__logo
            grid-row
            mobile-lg:grid-col-6 mobile-lg:grid-gap-2
          "
        >
          <div class="mobile-lg:grid-col-auto">
            <img class="usa-footer__logo-img" src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/logo-img.png" alt="" />
          </div>
          <div class="mobile-lg:grid-col-auto">
            <p class="usa-footer__logo-heading">&lt;Name of Agency&gt;</p>
          </div>
        </div>
        <div class="usa-footer__contact-links mobile-lg:grid-col-6">
          <div class="usa-footer__social-links grid-row grid-gap-1">
            <div class="grid-col-auto">
              <a class="usa-social-link" href="javascript:void(0);"
                ><img
                  class="usa-social-link__icon"
                  src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/usa-icons/facebook.svg"
                  alt="Facebook"
              /></a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="javascript:void(0);"
                ><img
                  class="usa-social-link__icon"
                  src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/usa-icons/twitter.svg"
                  alt="Twitter"
              /></a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="javascript:void(0);"
                ><img
                  class="usa-social-link__icon"
                  src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/usa-icons/youtube.svg"
                  alt="YouTube"
              /></a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="javascript:void(0);"
                ><img
                  class="usa-social-link__icon"
                  src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/usa-icons/instagram.svg"
                  alt="Instagram"
              /></a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="javascript:void(0);"
                ><img
                  class="usa-social-link__icon"
                  src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/usa-icons/rss_feed.svg"
                  alt="RSS"
              /></a>
            </div>
          </div>
          <p class="usa-footer__contact-heading">
            &lt;Agency Contact Center&gt;
          </p>
          <address class="usa-footer__address">
            <div class="usa-footer__contact-info grid-row grid-gap">
              <div class="grid-col-auto">
                <a href="tel:1-800-555-5555">&lt;(800) 555-GOVT&gt;</a>
              </div>
              <div class="grid-col-auto">
                <a href="mailto:info@agency.gov">&lt;info@agency.gov&gt;</a>
              </div>
            </div>
          </address>
        </div>
      </div>
    </div>
  </div>
</footer>

<h3 class="site-preview-heading" id="medium-footer">Medium footer</h3>

<footer class="usa-footer">
  <div class="grid-container usa-footer__return-to-top">
    <a href="#">Return to top</a>
  </div>
  <div class="usa-footer__primary-section">
    <nav class="usa-footer__nav" aria-label="Footer navigation">
      <ul class="grid-row grid-gap">
        <li
          class="
            mobile-lg:grid-col-4
            desktop:grid-col-auto
            usa-footer__primary-content
          "
        >
          <a class="usa-footer__primary-link" href="javascript:void(0);"
            >&lt;Primary link&gt;</a
          >
        </li>
        <li
          class="
            mobile-lg:grid-col-4
            desktop:grid-col-auto
            usa-footer__primary-content
          "
        >
          <a class="usa-footer__primary-link" href="javascript:void(0);"
            >&lt;Primary link&gt;</a
          >
        </li>
        <li
          class="
            mobile-lg:grid-col-4
            desktop:grid-col-auto
            usa-footer__primary-content
          "
        >
          <a class="usa-footer__primary-link" href="javascript:void(0);"
            >&lt;Primary link&gt;</a
          >
        </li>
        <li
          class="
            mobile-lg:grid-col-4
            desktop:grid-col-auto
            usa-footer__primary-content
          "
        >
          <a class="usa-footer__primary-link" href="javascript:void(0);"
            >&lt;Primary link&gt;</a
          >
        </li>
      </ul>
    </nav>
  </div>
  <div class="usa-footer__secondary-section">
    <div class="grid-container">
      <div class="grid-row grid-gap">
        <div
          class="
            usa-footer__logo
            grid-row
            mobile-lg:grid-col-6 mobile-lg:grid-gap-2
          "
        >
          <div class="mobile-lg:grid-col-auto">
            <img class="usa-footer__logo-img" src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/logo-img.png" alt="" />
          </div>
          <div class="mobile-lg:grid-col-auto">
            <p class="usa-footer__logo-heading">&lt;Name of Agency&gt;</p>
          </div>
        </div>
        <div class="usa-footer__contact-links mobile-lg:grid-col-6">
          <div class="usa-footer__social-links grid-row grid-gap-1">
            <div class="grid-col-auto">
              <a class="usa-social-link" href="javascript:void(0);"
                ><img
                  class="usa-social-link__icon"
                  src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/usa-icons/facebook.svg"
                  alt="Facebook"
              /></a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="javascript:void(0);"
                ><img
                  class="usa-social-link__icon"
                  src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/usa-icons/twitter.svg"
                  alt="Twitter"
              /></a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="javascript:void(0);"
                ><img
                  class="usa-social-link__icon"
                  src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/usa-icons/youtube.svg"
                  alt="YouTube"
              /></a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="javascript:void(0);"
                ><img
                  class="usa-social-link__icon"
                  src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/usa-icons/instagram.svg"
                  alt="Instagram"
              /></a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="javascript:void(0);"
                ><img
                  class="usa-social-link__icon"
                  src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/usa-icons/rss_feed.svg"
                  alt="RSS"
              /></a>
            </div>
          </div>
          <p class="usa-footer__contact-heading">
            &lt;Agency Contact Center&gt;
          </p>
          <address class="usa-footer__address">
            <div class="usa-footer__contact-info grid-row grid-gap">
              <div class="grid-col-auto">
                <a href="tel:1-800-555-5555">&lt;(800) 555-GOVT&gt;</a>
              </div>
              <div class="grid-col-auto">
                <a href="mailto:info@agency.gov">&lt;info@agency.gov&gt;</a>
              </div>
            </div>
          </address>
        </div>
      </div>
    </div>
  </div>
</footer>

<h3 class="site-preview-heading" id="slim-footer">Slim footer</h3>

<footer class="usa-footer usa-footer--slim">
  <div class="grid-container usa-footer__return-to-top">
    <a href="#">Return to top</a>
  </div>
  <div class="usa-footer__primary-section">
    <div class="usa-footer__primary-container grid-row">
      <div class="mobile-lg:grid-col-8">
        <nav class="usa-footer__nav" aria-label="Footer navigation,">
          <ul class="grid-row grid-gap">
            <li
              class="
                mobile-lg:grid-col-6
                desktop:grid-col-auto
                usa-footer__primary-content
              "
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);"
                >&lt;Primary link&gt;</a
              >
            </li>
            <li
              class="
                mobile-lg:grid-col-6
                desktop:grid-col-auto
                usa-footer__primary-content
              "
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);"
                >&lt;Primary link&gt;</a
              >
            </li>
            <li
              class="
                mobile-lg:grid-col-6
                desktop:grid-col-auto
                usa-footer__primary-content
              "
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);"
                >&lt;Primary link&gt;</a
              >
            </li>
            <li
              class="
                mobile-lg:grid-col-6
                desktop:grid-col-auto
                usa-footer__primary-content
              "
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);"
                >&lt;Primary link&gt;</a
              >
            </li>
          </ul>
        </nav>
      </div>
      <div class="mobile-lg:grid-col-4">
        <address class="usa-footer__address">
          <div class="grid-row grid-gap">
            <div
              class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto"
            >
              <div class="usa-footer__contact-info">
                <a href="tel:1-800-555-5555">&lt;(800) 555-GOVT&gt;</a>
              </div>
            </div>
            <div
              class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto"
            >
              <div class="usa-footer__contact-info">
                <a href="mailto:info@agency.gov">&lt;info@agency.gov&gt;</a>
              </div>
            </div>
          </div>
        </address>
      </div>
    </div>
  </div>
  <div class="usa-footer__secondary-section">
    <div class="grid-container">
      <div class="usa-footer__logo grid-row grid-gap-2">
        <div class="grid-col-auto">
          <img class="usa-footer__logo-img" src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/logo-img.png" alt="" />
        </div>
        <div class="grid-col-auto">
          <p class="usa-footer__logo-heading">&lt;Agency Contact Center&gt;</p>
        </div>
      </div>
    </div>
  </div>
</footer>
  • 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.
  • Medium and slim footers: Use the big footer when your footer has more than five links.
  • 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.
  • 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.
Variable Description
$theme-footer-font-family

Font family of the footer.
$theme-footer-max-width

Maximum width of footer container.
Variant Description

usa-footer–big

A multi-column footer that expands and collapses on mobile.

usa-footer–slim

A compact version of the footer.
  • Package usage: @forward "usa-footer";
  • Dependencies: uswds-fonts, usa-layout-grid, usa-input, usa-form, usa-label, usa-list, usa-button, usa-icon