Footer

Footer navigation patterns with links, social icons, multi-column layouts, and newsletter signup forms.

Overview

Footers provide secondary navigation, legal links, and brand information at the bottom of pages. These patterns use semantic <footer> and <nav> elements with aria-label for accessibility.

Key features:

  • Semantic HTML with proper ARIA attributes for screen readers
  • Responsive layouts using data-layout attributes (grid, sidebar, cluster, stack)
  • Social media icons with accessible labels, wrapped in <nav aria-label="Social media">
  • Newsletter signup with form-field component
  • footer.site provides base styling (background, border, link colors, compact nav padding) with zero custom CSS

Simple Footer

A compact footer with horizontal links, logo, and social icons. Uses data-layout="cluster" with data-layout-justify="between" for flexible horizontal spacing that wraps gracefully on smaller screens.

 <footer class="site" data-layout="stack" data-layout-gap="m"> <div data-layout="cluster" data-layout-justify="between" data-layout-align="center"> <div data-layout="cluster" data-layout-gap="m" data-layout-align="center"> <a href="/"><brand-mark>Acme Co</brand-mark></a> <nav class="horizontal" aria-label="Footer navigation"> <ul> <li><a href="/about/">About</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="/careers/">Careers</a></li> <li><a href="/contact/">Contact</a></li> </ul> </nav> </div> <nav class="horizontal" aria-label="Social media"> <ul> <li><a href="https://github.com" aria-label="GitHub"> <icon-wc name="github"></icon-wc> </a></li> <li><a href="https://twitter.com" aria-label="Twitter"> <icon-wc name="twitter"></icon-wc> </a></li> <li><a href="https://linkedin.com" aria-label="LinkedIn"> <icon-wc name="linkedin"></icon-wc> </a></li> </ul> </nav> </div> <small>&copy; 2024 Acme Co. All rights reserved.</small> </footer>

Multi-Column Footer

A comprehensive footer with organized link categories in columns. Uses data-layout="grid" with data-layout-min="10rem" to create responsive columns that automatically adjust based on available space.

 <footer class="site" data-layout="stack" data-layout-gap="l"> <div data-layout="grid" data-layout-min="10rem" data-layout-gap="xl"> <nav aria-label="Company links" data-layout="stack" data-layout-gap="m"> <h3>Company</h3> <ul data-layout="stack" data-layout-gap="2xs"> <li><a href="/about/">About</a></li> <li><a href="/careers/">Careers</a></li> <li><a href="/press/">Press</a></li> <li><a href="/news/">News</a></li> </ul> </nav> <nav aria-label="Product links" data-layout="stack" data-layout-gap="m"> <h3>Product</h3> <ul data-layout="stack" data-layout-gap="2xs"> <li><a href="/features/">Features</a></li> <li><a href="/pricing/">Pricing</a></li> <li><a href="/integrations/">Integrations</a></li> <li><a href="/changelog/">Changelog</a></li> </ul> </nav> <nav aria-label="Resources links" data-layout="stack" data-layout-gap="m"> <h3>Resources</h3> <ul data-layout="stack" data-layout-gap="2xs"> <li><a href="/docs/">Documentation</a></li> <li><a href="/guides/">Guides</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="/support/">Support</a></li> </ul> </nav> <nav aria-label="Legal links" data-layout="stack" data-layout-gap="m"> <h3>Legal</h3> <ul data-layout="stack" data-layout-gap="2xs"> <li><a href="/privacy/">Privacy</a></li> <li><a href="/terms/">Terms</a></li> <li><a href="/cookies/">Cookies</a></li> <li><a href="/licenses/">Licenses</a></li> </ul> </nav> </div> <div class="footer-bottom" data-layout="cluster" data-layout-justify="between" data-layout-align="center"> <div data-layout="cluster" data-layout-gap="m" data-layout-align="center"> <a href="/"><brand-mark>Acme Co</brand-mark></a> <small>&copy; 2024 Acme Co. All rights reserved.</small> </div> <nav class="horizontal" aria-label="Social media"> <ul> <li><a href="https://github.com" aria-label="GitHub"> <icon-wc name="github"></icon-wc> </a></li> <li><a href="https://twitter.com" aria-label="Twitter"> <icon-wc name="twitter"></icon-wc> </a></li> <li><a href="https://linkedin.com" aria-label="LinkedIn"> <icon-wc name="linkedin"></icon-wc> </a></li> <li><a href="https://youtube.com" aria-label="YouTube"> <icon-wc name="youtube"></icon-wc> </a></li> </ul> </nav> </div> </footer>

Multi-Column Styles

Additional styles for the multi-column layout, including uppercase headings and the bottom separator:

 /* Column headings — uppercase, muted */ footer.site h3 { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 0; } /* Smaller nav links in column layout */ footer.site nav a { font-size: var(--font-size-sm); } /* Bottom separator */ .footer-bottom { border-block-start: var(--border-width-thin) solid var(--color-border); padding-block-start: var(--size-l); margin-block-start: var(--size-xl); }

Footer with Newsletter

A footer that includes a newsletter signup form alongside navigation links. Uses data-layout="sidebar" to create a split layout where the newsletter section takes priority, with link columns on the side.

 <footer class="site" data-layout="stack" data-layout-gap="l"> <div data-layout="sidebar" data-layout-gap="2xl" data-layout-sidebar-width="wide" data-layout-content-min="50"> <section class="newsletter" data-layout="stack" data-layout-gap="m"> <h3>Subscribe to our newsletter</h3> <p>Get the latest updates, tips, and news delivered to your inbox.</p> <form action="/subscribe" method="POST"> <div data-layout="cluster" data-layout-gap="s"> <form-field> <label for="email" class="sr-only">Email address</label> <input type="email" id="email" name="email" required autocomplete="email" placeholder="Enter your email" /> </form-field> <button type="submit">Subscribe</button> </div> </form> <p class="text-sm text-muted"> By subscribing, you agree to our <a href="/privacy/">Privacy Policy</a>. </p> </section> <div data-layout="grid" data-layout-min="8rem" data-layout-gap="xl"> <nav aria-label="Product links" data-layout="stack" data-layout-gap="m"> <h4>Product</h4> <ul data-layout="stack" data-layout-gap="2xs"> <li><a href="/features/">Features</a></li> <li><a href="/pricing/">Pricing</a></li> <li><a href="/integrations/">Integrations</a></li> </ul> </nav> <nav aria-label="Resources links" data-layout="stack" data-layout-gap="m"> <h4>Resources</h4> <ul data-layout="stack" data-layout-gap="2xs"> <li><a href="/docs/">Documentation</a></li> <li><a href="/guides/">Guides</a></li> <li><a href="/blog/">Blog</a></li> </ul> </nav> <nav aria-label="Company links" data-layout="stack" data-layout-gap="m"> <h4>Company</h4> <ul data-layout="stack" data-layout-gap="2xs"> <li><a href="/about/">About</a></li> <li><a href="/careers/">Careers</a></li> <li><a href="/contact/">Contact</a></li> </ul> </nav> </div> </div> <div class="footer-bottom" data-layout="cluster" data-layout-justify="between" data-layout-align="center"> <div data-layout="cluster" data-layout-gap="m" data-layout-align="center"> <a href="/"><brand-mark>Acme Co</brand-mark></a> <small>&copy; 2024 Acme Co. All rights reserved.</small> </div> <nav class="horizontal" aria-label="Social media"> <ul> <li><a href="https://github.com" aria-label="GitHub"> <icon-wc name="github"></icon-wc> </a></li> <li><a href="https://twitter.com" aria-label="Twitter"> <icon-wc name="twitter"></icon-wc> </a></li> <li><a href="https://linkedin.com" aria-label="LinkedIn"> <icon-wc name="linkedin"></icon-wc> </a></li> </ul> </nav> </div> </footer>

Newsletter Styles

Additional styles specific to the newsletter section:

 /* Newsletter heading and description */ .newsletter h3 { font-size: var(--font-size-lg); margin: 0; } .newsletter p { color: var(--color-text-muted); font-size: var(--font-size-sm); } /* Column headings for newsletter footer */ footer.site h4 { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 0; }

Base Footer Styles

The footer.site class from VB handles most base styling automatically — background, border, padding, muted link colors with hover transitions, and compact nav link padding. No custom CSS is needed for the simple footer variant.

 /* VB provides footer.site base styles automatically: - background, border, padding, margin-block-start - muted link color, no underline, hover brightens - compact nav link padding (8px vertical, 0 horizontal) - tight gap between horizontal nav items No custom CSS needed for the simple footer variant. */

Usage Notes

  • Accessibility: Use aria-label on each <nav> element to distinguish between different navigation sections (e.g., "Company links", "Legal links")
  • Social icons: Always include aria-label on social media links since they only contain icons. Wrap social links in <nav aria-label="Social media"> for proper semantics and to suppress external-link indicators
  • Newsletter forms: Use class="sr-only" on labels for screen reader accessibility when using placeholder text
  • Copyright: Use <small> for copyright text — VB styles it at the correct size automatically
  • Link organization: Group related links under descriptive headings for better navigation
  • Layout attributes: Use data-layout attributes directly on semantic elements instead of custom element wrappers for cleaner markup
  • Responsive behavior: Test footer layouts at various viewport widths to ensure graceful wrapping

Related

Navbar

Header navigation patterns

Icon WC

Icon web component documentation

Layout Grid

Responsive grid layout documentation

Form Field

Form field component for inputs