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;
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.
<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>© 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>© 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>