Footer

Use the footer for site navigation and extra information. People look there after they finish a page, or when they want to know more about the site.

Put the page in the three HTML5 landmarks header, main, and footer. The footer is CSS only, with no JavaScript component. A <footer> whose only child is a nav.navigation-bar is the navigation bar. Anything richer is the site footer. Inside it, a heading is a column title, a <nav> is a link list, and the last <small> is the legal bar.

By default the footer is unfilled, with a dashed hairline and theme tokens instead of a solid primary bar. Add filled (or surface) for a surface-container well.

<footer>
  <section>
    <h2>Product</h2>
    <p>A column with no links is not navigation — it is a section with a heading.</p>
  </section>
  <nav aria-labelledby="footer-links">
    <h2 id="footer-links">Links</h2>
    <a href="/link-1">Link 1</a>
    <a href="/link-2">Link 2</a>
  </nav>
  <small>
    <span>&copy; 2026 Copyright Text</span>
    <a href="/sitemap">More Links</a>
  </small>
</footer>

You can still use the grid if you prefer columns. The component is a bare <footer> with <nav> columns and a trailing <small>. .page-footer and .footer-copyright are not aliases, and no rule in the stylesheet matches either class.

<footer>
  <div class="container">
    <div class="row">
      <div class="s12 m6">
        <h5>Footer Content</h5>
        <p>You can use rows and columns here.</p>
      </div>
      <div class="s12 m6">
        <h5>Links</h5>
        <ul>
          <li><a href="/link-1">Link 1</a></li>
        </ul>
      </div>
    </div>
    <small>
      <span>&copy; 2026 Copyright Text</span>
    </small>
  </div>
</footer>

Give the trailing <small> two children, the notice and the trailing link. It is the copyright bar, a wrapping flex row with space-between, so you do not need a right float.

Sticky footer

For a sticky footer, add these rules to your own stylesheet once the page has header, main and footer landmarks. Expressive does not include them. A sticky footer sits at the bottom of a short page and moves down when the content is taller. It is not a fixed footer.

body {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}