# Footer

> Site navigation and extra information at the end of a page.

## Footer

Footers are a good place for site navigation and extra information. This is where people look after they finish the page, or when they want more about the site.

Put the page in the three HTML5 landmarks `header`, `main`, and `footer`. The footer is CSS-only. A `<footer>` whose only child is a `nav.navigation-bar` is the [navigation bar](/navigation-bar.html.md); anything richer is the site footer. A heading is a column title, a `<nav>` is a link list, and the last `<small>` is the legal bar. There is no JavaScript component.

Unfilled by default: a dashed hairline and theme tokens — not a solid primary bar. Add `filled` (or `surface`) for a `surface-container` well.

## Product

A column with no links is not navigation — it is a section with a heading.

## Links

Link 1 Link 2 Link 3 Link 4

© 2026 Copyright Text More Links

```
<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</a>
    <a href="#!">Link 2</a>
  </nav>
  <small>
    <span>&copy; 2026 Copyright Text</span>
    <a href="#!">More Links</a>
  </small>
</footer>
```

The grid still works if you prefer columns. `.page-footer` and `.footer-copyright` are **not** aliases — no rule in the sheet matches either, and a bare `<footer>` with `<nav>` columns and a trailing `<small>` is the component.

```
<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</a></li>
        </ul>
      </div>
    </div>
    <small>
      <span>&copy; 2026 Copyright Text</span>
    </small>
  </div>
</footer>
```

The trailing `<small>` is the copyright bar: a wrapping flex row with space-between. Put the notice and the trailing link as two children. A `right` float is not required.

## Sticky Footer

When the `<footer>` is a direct child of `body`, the page is at least the viewport tall and `main` grows so the footer sits at the bottom on a short page. That is not a fixed footer, and it is not a navigation bar.

```
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>
```
