Page Footer

The page footer contains copyright information and secondary navigation.

Considerations

We use the <footer> element to wrap content, which provides a "contentinfo" role to assistive technologies. Only use one per page.

As in the page header, navigation must use a <nav> element which provides the "navigation" role to assistive technologies. Give it an aria-label like "Footer menu" to differentiate it from other navs on the page.

Examples

Page Footer with Navigation

<footer class="page-footer">
  <p class="page-copyright">&copy; 2026 thoughtbot, inc.</p>

  <nav aria-label="Footer menu" class="footer-nav">
    <ul class="page-nav">
      <li>
        <a href="#">Link 1</a>
      </li>
      <li>
        <a href="#">Link 2</a>
      </li>
      <li>
        <a href="#" class="page-nav__link--active" aria-current="page"
          >Link 3</a
        >
      </li>
      <li>
        <a href="#">Link 4</a>
      </li>
    </ul>
  </nav>
</footer>