Skip to main content

Footer

A footer appears at the bottom of a web page and helps me find information like a site map or legal information.

The Footer component is the last landmark of a web page and appears globally on all site pages. It often contains secondary or tertiary navigations, simply labeled “footer navigation,” with links to other pages or legal disclaimers users need access to. It also contains the site’s Identifier component.

Details

The Footer extends the USWDS Footer, slim variant.

Examples

Footer, slim variant

The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

<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>
        <nav class="usa-footer__nav padding-0" aria-label="Footer navigation">
          <ul class="grid-row grid-gap">
            <li class="tablet:grid-col-auto margin-0 usa-footer__primary-content">
              <a class="usa-footer__primary-link" href="#">Site map</a>
            </li>
            <li class="tablet:grid-col-auto margin-0 usa-footer__primary-content">
              <a class="usa-footer__primary-link usa-link--external" rel="noopener nofollow" target="_blank" href="https://en.wikipedia.org/wiki/Privacy_policy">Privacy policy</a>
            </li>
            <li class="tablet:grid-col-auto margin-0 usa-footer__primary-content">
              <a class="usa-footer__primary-link usa-link--external" rel="noopener nofollow" target="_blank" href="https://en.wikipedia.org/wiki/Terms_of_service">Terms of service</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
  <div class="usa-footer__secondary-section">
    <div class="grid-container">
      <div class="usa-footer__logo">
        <a href="https://codeforamerica.github.io/uswds/">
          <svg xmlns="http://www.w3.org/2000/svg" class="display-block tablet:display-none" role="img" aria-hidden="true" style="width: 101px; height: 82px">
            <use href="#logo-cfa-stacked">
            </use>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" class="display-none tablet:display-block" role="img" aria-hidden="true" style="width: 161px; height: 49px">
            <use href="#logo-cfa-long">
            </use>
          </svg>
          <span class="usa-sr-only">Code for America</span>
        </a>
      </div>
    </div>
  </div>
  <div>
    <div class="usa-identifier cfa-font-smooth">
      <section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier">
        <div class="usa-identifier__container">
          <div class="usa-identifier__identity">
            <p class="usa-identifier__identity-domain">domain.gov</p>
            <p class="usa-identifier__identity-disclaimer">This service was built by Code for America in partnership with Domain.gov on behalf of the people of the United States of America.</p>
          </div>
        </div>
      </section>
      <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links">
        <div class="usa-identifier__container">
          <ul class="add-list-reset">
            <li class="usa-identifier__required-links-item">
              <a class="usa-identifier__required-link usa-link usa-link--external usa-link--external" rel="noopener nofollow" target="_blank" href="https://codeforamerica.org">About Code for America</a>
            </li>
            <li class="usa-identifier__required-links-item">
              <a class="usa-identifier__required-link usa-link usa-link--external usa-link--external" rel="noopener nofollow" target="_blank" href="https://codeforamerica.org/about-us/diversity-equity-inclusion">Diversity, Equity, &amp; Inclusion</a>
            </li>
          </ul>
        </div>
      </nav>
      <section class="usa-identifier__section usa-identifier__section--usagov" aria-label="Domain.gov government information and services">
        <div class="usa-identifier__container">
          <div class="usa-identifier__usagov-description">Looking for government information and services?</div>
          <a class="usa-link usa-link--external" rel="noopener nofollow" target="_blank" href="https://get.gov">Visit domain.gov</a>
        </div>
      </section>
    </div>
  </div>
</footer>

Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

{
  "modifier": "",
  "returnToTop": "#",
  "navigation": {
    "ariaLabel": "Footer navigation",
    "items": [
      {
        "label": "Site map",
        "href": "#"
      },
      {
        "label": "Privacy policy",
        "href": "https://en.wikipedia.org/wiki/Privacy_policy",
        "target": "_blank",
        "rel": "noopener nofollow",
        "modifier": "usa-link--external"
      },
      {
        "label": "Terms of service",
        "href": "https://en.wikipedia.org/wiki/Terms_of_service",
        "target": "_blank",
        "rel": "noopener nofollow",
        "modifier": "usa-link--external"
      }
    ]
  },
  "home": {
    "href": "https://codeforamerica.github.io/uswds/"
  },
  "logo": {
    "alt": {
      "modifier": "usa-sr-only",
      "text": "Code for America"
    },
    "default": {
      "href": "#logo-cfa-stacked",
      "style": "width: 101px; height: 82px"
    },
    "tablet": {
      "href": "#logo-cfa-long",
      "style": "width: 161px; height: 49px"
    }
  },
  "identifier": {
    "modifier": "cfa-font-smooth",
    "identity": {
      "ariaLabel": "Agency identifier",
      "domain": "domain.gov",
      "disclaimer": "This service was built by Code for America in partnership with Domain.gov on behalf of the people of the United States of America."
    },
    "requiredLinks": {
      "ariaLabel": "Important links",
      "items": [
        {
          "label": "About Code for America",
          "href": "https://codeforamerica.org",
          "target": "_blank",
          "rel": "noopener nofollow",
          "modifier": "usa-link--external"
        },
        {
          "label": "Diversity, Equity, & Inclusion",
          "href": "https://codeforamerica.org/about-us/diversity-equity-inclusion",
          "target": "_blank",
          "rel": "noopener nofollow",
          "modifier": "usa-link--external"
        }
      ]
    },
    "governmentSection": {
      "ariaLabel": "Domain.gov government information and services",
      "description": "Looking for government information and services?",
      "link": {
        "label": "Visit domain.gov",
        "href": "https://get.gov",
        "target": "_blank",
        "rel": "noopener nofollow",
        "modifier": "usa-link--external"
      }
    }
  }
}

Guidance

Refer to additional guidance on the USWDS documentation site.

USWDS documentation site

Accessibility

  • Unchecked
    Customization to the visual appearance of the Footer has been verified for WCAG 2.1 AA contrast minimum success.
  • Unchecked
    The Footer examples pass manual audits (WCAG 2.1 AA using axe or Lighthouse).
  • Unchecked
    The Footer achieves WCAG 2.1 AA resizing success.
    Resizing text up to 200% without loss of content or functionality.
  • Unchecked
    The Footer passes keyboard interaction tests.
    No keyboard test has been created.
  • Unchecked
    The Footer passes screen reader interaction tests.

  • Unchecked
    Guidance on ensuring Footer accessibility has been provided in this documentation.

Refer to additional accessibility guidance on the USWDS documentation site.

Checklist Key

  • Passes
    Passes
  • Unchecked
    Unchecked

Design library component

Source and usage

Package: @codeforamerica/uswds/packages/cfa-footer

  • Thymeleaf template fragment: ./cfa-footer.th.html
  • Embedded Ruby (ERB) partial template: ./_cfa-footer.html.erb
Packages are collections of functionality that make up a component. Typically, they include stylesheets, templates, and scripts. Learn more about packages on the USWDS documentation site.
Sass theme settings

Below is a demonstration of customizing the component theme settings. Refer to the theme and package-level settings documentation.

// Theme-level settings
@use 'cfa-uswds-theme' with (
  // Global theme settings that affect the component, changing these will affect other components
  $cfa-color-base-lightest: 'gray-warm-4', // Affects footer primary section background
  $cfa-color-base-lighter: 'gray-warm-10'  // Affects footer secondary section background
);
USWDS theme settings

Refer to the usage documentation for additional USWDS theme settings.

@use "uswds-core" with ( /* additional USWDS theme settings */ );
Thymeleaf template fragment

This is the pre-rendered template fragment from the package. It is the same template used to render the demonstrations above. You may copy and paste from this example or use the template using the th:block th:replace tag. See the example below.

<footer th:fragment="footer(modifier, returnToTop, navigation, logo, home, identifier)" class="usa-footer usa-footer--slim" th:classappend="${modifier}">
  <div th:if="${returnToTop}" class="grid-container usa-footer__return-to-top">
    <a th:href="${returnToTop}">Return to top</a>
  </div>
  <div th:if="${navigation}" class="usa-footer__primary-section">
    <div class="usa-footer__primary-container grid-row">
      <div>
        <nav class="usa-footer__nav padding-0" th:attr="aria-label=${navigation.ariaLabel}">
          <ul class="grid-row grid-gap">
            <li th:each="item: ${navigation.items}" class="tablet:grid-col-auto margin-0 usa-footer__primary-content">
              <a class="usa-footer__primary-link" th:href="${item.href}" th:classappend="${item.modifier}" th:attr="rel=${item.rel},target=${item.target}" th:text="${item.label}">Label</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
  <div th:if="${logo}" class="usa-footer__secondary-section">
    <div class="grid-container">
      <div class="usa-footer__logo">
        <a th:href="${home.href}" th:class="${home.modifier}">
          <svg th:if="${logo.default}" th:attr="style=${logo.default.style}" xmlns="http://www.w3.org/2000/svg" class="display-block tablet:display-none" role="img" aria-hidden="true">
            <use th:href="${logo.default.href}">
          </svg>
          <svg th:if="${logo.tablet}" th:attr="style=${logo.tablet.style}" xmlns="http://www.w3.org/2000/svg" class="display-none tablet:display-block" role="img" aria-hidden="true">
            <use th:href="${logo.tablet.href}">
          </svg>
          <span th:if="${logo.alt}" th:class="${logo.alt.modifier}" th:text="${logo.alt.text}">Logo text</span>
        </a>
      </div>
    </div>
  </div>
  <div th:if="${identifier}">
    <th:block th:replace="~{packages/cfa-identifier/cfa-identifier.th :: identifier(${identifier.modifier}, ${identifier.identity}, ${identifier.requiredLinks}, ${identifier.governmentSection})}" />
  </div>
</footer>
Template fragment inclusion

Below is an example of how to use the fragment from the package directory using the th:block th:replace inclusion tag. Replace the fragment parameters using your variables or context.

<th:block th:replace="~{packages/cfa-footer/cfa-footer.th :: footer(${modifier}, ${returnToTop}, ${navigation}, ${logo}, ${home}, ${identifier})}" />
ERB template partial

This is the pre-rendered partial template from the package. You may copy and paste from this example or use the template directly from the path.

<footer class="usa-footer usa-footer--slim<% if defined?(modifier) %> <%= modifier %><% end %>">
  <% if defined?(returnToTop) %><div class="grid-container usa-footer__return-to-top">
    <a href="<%= returnToTop %>">Return to top</a>
  </div><% end %>
  <% if defined?(navigation) %><div class="usa-footer__primary-section">
    <div class="usa-footer__primary-container grid-row">
      <div>
        <nav class="usa-footer__nav padding-0"<% if navigation['ariaLabel'] %> aria-label="<%= navigation['ariaLabel'] %>"<% end %>>
          <ul class="grid-row grid-gap">
            <% navigation['items'].each do |item| %><li class="tablet:grid-col-auto margin-0 usa-footer__primary-content">
              <a class="usa-footer__primary-link<% if item['modifier'] %> <%= item['modifier'] %><% end %>"
                <% if item['href'] %>href="<%= item['href'] %>"<% end %>
                <% if item['rel'] %>rel="<%= item['rel'] %>"<% end %>
                <% if item['target'] %>target="<%= item['target'] %>"<% end %>><%= item['label'] %></a>
            </li><% end %>
          </ul>
        </nav>
      </div>
    </div>
  </div><% end %>
  <% if defined?(logo) %><div class="usa-footer__secondary-section">
    <div class="grid-container">
      <div class="usa-footer__logo">
        <a href="<%= home['href'] %>"<% if home['modifier'] %> class="<%= home['modifier'] %>"<% end %>>
          <% if logo['default'] %><svg<% if logo['default']['style'] %> style="<%= logo['default']['style'] %>"<% end %> xmlns="http://www.w3.org/2000/svg" class="display-block tablet:display-none" role="img" aria-hidden="true">
            <use href="<%= logo['default']['href'] %>">
          </svg><% end %>
          <% if logo['tablet'] %><svg<% if logo['tablet']['style'] %> style="<%= logo['tablet']['style'] %>"<% end %> xmlns="http://www.w3.org/2000/svg" class="display-none tablet:display-block" role="img" aria-hidden="true">
            <use href="<%= logo['tablet']['href'] %>">
          </svg><% end %>
          <% if logo['alt'] %><span<% if logo['alt'].has_key?('modifier') %> class="<%= logo['alt']['modifier'] %>"<% end %>><%= logo['alt']['text'] %></span><% end %>
        </a>
      </div>
    </div>
  </div><% end %>
  <% if defined?(identifier) %><div>
  <%= ERB.new(File.read('packages/cfa-identifier/_cfa-identifier.html.erb'), 0, 0, '@identifier')
    .result_with_hash({
      modifier: (identifier['modifier'] if identifier['modifier']),
      identity: (identifier['identity'] if identifier['identity']),
      requiredLinks: (identifier['requiredLinks'] if identifier['requiredLinks']),
      governmentSection: (identifier['governmentSection'] if identifier['governmentSection'])
    }.compact) %>
  </div><% end %>
</footer>
Partial render

Below is an example of how to include the partial in a view from the package directory using the Ruby ERB class. Replace the argument values using your variables or context. In a Rails environment, the render method can be used instead with the same hash values.

<%= ERB.new(File.read('packages/cfa-footer/_cfa-footer.html.erb'), 0, 0, '@footer').result_with_hash({modifier: modifier, returnToTop: returnToTop, navigation: navigation, home: home, logo: logo, identifier: identifier}) %>

uswds.codeforamerica.org

Learn more about Code for America by visiting codeforamerica.org