Featured
FooterMulti-Column Footer
A four-column sitemap with a brand blurb - the full footer for a marketing site.
#footer#columns#sitemap
6 frameworksIntermediate
Loading…
A logo, one row of links and a copyright line - stacked on mobile, spread on desktop.
<!--
<footer> is a landmark on its own, but the links inside it are navigation and
need their own <nav aria-label="Footer"> - a page with a main nav and a
footer nav otherwise announces "navigation, navigation" and the user has to
enter each one to find out which is which.
The year is inside <time>, so it is machine-readable rather than a bare
number that happens to look like a date.
-->
<footer class="footer">
<div class="footer__inner">
<a class="footer__brand" href="/">Adysre</a>
<nav class="footer__nav" aria-label="Footer">
<ul class="footer__links">
<li><a class="footer__link" href="/about">About</a></li>
<li><a class="footer__link" href="/blog">Blog</a></li>
<li><a class="footer__link" href="/careers">Careers</a></li>
<li><a class="footer__link" href="/contact">Contact</a></li>
</ul>
</nav>
<p class="footer__copy">© <time datetime="2026">2026</time> Adysre Inc. All rights reserved.</p>
</div>
</footer>| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional classes merged onto the root element. |
`<footer>` is a landmark, but the links inside it are navigation and need their own `<nav aria-label="Footer">` - without the label a page with a main nav and a footer nav announces "navigation, navigation" and the user has to enter each one to find out which is which. The year comes from `new Date().getFullYear()`, which in Next.js runs on the server at render time; the `<time datetime>` wrapper makes it machine-readable rather than a bare number that happens to look like a date. Watch the small print: `text-gray-500` on white is 4.8:1 and clears AA, `text-gray-400` is 2.8:1 and does not - the shade below is where this component usually breaks.