Open demo

CSS code

HTML 
<footer class="fmega">
  <div class="grid">
    <nav aria-labelledby="fmega-shop"><h2 id="fmega-shop">Shop</h2>
      <ul><li><a href="#">New arrivals</a></li><li><a href="#">Best sellers</a></li><li><a href="#">Deals</a></li><li><a href="#">Gift cards</a></li><li><a href="#">Clearance</a></li></ul></nav>
    <nav aria-labelledby="fmega-help"><h2 id="fmega-help">Help</h2>
      <ul><li><a href="#">Order status</a></li><li><a href="#">Shipping</a></li><li><a href="#">Returns</a></li><li><a href="#">Size guides</a></li><li><a href="#">Contact us</a></li></ul></nav>
    <nav aria-labelledby="fmega-company"><h2 id="fmega-company">Company</h2>
      <ul><li><a href="#">Our story</a></li><li><a href="#">Stores</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Sustainability</a></li></ul></nav>
    <nav aria-labelledby="fmega-account"><h2 id="fmega-account">Account</h2>
      <ul><li><a href="#">Sign in</a></li><li><a href="#">Register</a></li><li><a href="#">Order history</a></li><li><a href="#">Wishlist</a></li><li><a href="#">Rewards</a></li></ul></nav>
    <nav aria-labelledby="fmega-resources"><h2 id="fmega-resources">Resources</h2>
      <ul><li><a href="#">Blog</a></li><li><a href="#">Buying guides</a></li><li><a href="#">Affiliates</a></li><li><a href="#">Wholesale</a></li><li><a href="#">Developers</a></li></ul></nav>
  </div>
  <ul class="trust">
    <li class="badge"><span aria-hidden="true">🔒</span> Secure checkout</li>
    <li class="badge"><span aria-hidden="true">🚚</span> Free shipping over $60</li>
    <li class="badge"><span aria-hidden="true">↩️</span> 30-day returns</li>
    <li class="badge"><span aria-hidden="true">⭐</span> 4.8/5 from 12k reviews</li>
  </ul>
  <div class="base">
    <p>© Harbor Supply Co.</p>
    <nav aria-label="Legal"><ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Accessibility</a></li><li><a href="#">Do not sell my info</a></li></ul></nav>
  </div>
</footer>
CSS 
/* Ecommerce sitemap footer: five link columns, a row of trust badges and a navy legal bar. Two columns below 768px. */
.fmega{--fmega-navy:#0e3a5d;--fmega-link:#51607a;--fmega-line:#dde3ec;
  background:#fff;border-top:3px solid var(--fmega-navy);color:#1c2430;line-height:normal}
.fmega,.fmega *{box-sizing:border-box}
.fmega h2,.fmega p,.fmega ul{margin:0;padding:0}
.fmega ul{list-style:none}
.fmega a{text-decoration:none;border-radius:3px}
.fmega a:focus-visible{outline:2px solid var(--fmega-navy);outline-offset:2px}
.fmega .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;max-width:1080px;margin:0 auto;padding:46px 32px 36px}
.fmega h2{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--fmega-navy);margin-bottom:12px}
.fmega .grid a{display:block;padding:4px 0;font-size:.83rem;color:var(--fmega-link)}
.fmega .grid a:hover{color:var(--fmega-navy);text-decoration:underline}
.fmega .trust{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;padding:0 32px 30px}
.fmega .badge{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--fmega-line);border-radius:10px;
  background:#f8fafc;font-size:.78rem;font-weight:700;color:var(--fmega-link)}
.fmega .base{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 0;padding:16px;background:var(--fmega-navy);color:#b8d2e6;font-size:.78rem;text-align:center}
.fmega .base ul{display:flex;flex-wrap:wrap;justify-content:center}
.fmega .base p::after,.fmega .base li+li::before{content:"·"}
.fmega .base p::after{margin-left:10px}
.fmega .base a{color:#fff;margin:0 10px}
.fmega .base a:hover{text-decoration:underline}
.fmega .base a:focus-visible{outline-color:#fff}
@media (max-width:767.98px){.fmega .grid{grid-template-columns:repeat(2,1fr);padding:40px 20px 32px}.fmega .trust{padding:0 20px 28px;gap:10px}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fmega">
  <div class="sitemap">
    <div class="row row-cols-2 row-cols-md-5">
      <nav class="col" aria-labelledby="fmega-shop"><h2 id="fmega-shop">Shop</h2>
        <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">New arrivals</a></li><li class="nav-item"><a class="nav-link" href="#">Best sellers</a></li><li class="nav-item"><a class="nav-link" href="#">Deals</a></li><li class="nav-item"><a class="nav-link" href="#">Gift cards</a></li><li class="nav-item"><a class="nav-link" href="#">Clearance</a></li></ul></nav>
      <nav class="col" aria-labelledby="fmega-help"><h2 id="fmega-help">Help</h2>
        <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Order status</a></li><li class="nav-item"><a class="nav-link" href="#">Shipping</a></li><li class="nav-item"><a class="nav-link" href="#">Returns</a></li><li class="nav-item"><a class="nav-link" href="#">Size guides</a></li><li class="nav-item"><a class="nav-link" href="#">Contact us</a></li></ul></nav>
      <nav class="col" aria-labelledby="fmega-company"><h2 id="fmega-company">Company</h2>
        <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Our story</a></li><li class="nav-item"><a class="nav-link" href="#">Stores</a></li><li class="nav-item"><a class="nav-link" href="#">Careers</a></li><li class="nav-item"><a class="nav-link" href="#">Press</a></li><li class="nav-item"><a class="nav-link" href="#">Sustainability</a></li></ul></nav>
      <nav class="col" aria-labelledby="fmega-account"><h2 id="fmega-account">Account</h2>
        <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Sign in</a></li><li class="nav-item"><a class="nav-link" href="#">Register</a></li><li class="nav-item"><a class="nav-link" href="#">Order history</a></li><li class="nav-item"><a class="nav-link" href="#">Wishlist</a></li><li class="nav-item"><a class="nav-link" href="#">Rewards</a></li></ul></nav>
      <nav class="col" aria-labelledby="fmega-resources"><h2 id="fmega-resources">Resources</h2>
        <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Blog</a></li><li class="nav-item"><a class="nav-link" href="#">Buying guides</a></li><li class="nav-item"><a class="nav-link" href="#">Affiliates</a></li><li class="nav-item"><a class="nav-link" href="#">Wholesale</a></li><li class="nav-item"><a class="nav-link" href="#">Developers</a></li></ul></nav>
    </div>
  </div>
  <ul class="trust list-unstyled d-flex flex-wrap justify-content-center mb-0">
    <li class="badge"><span aria-hidden="true">🔒</span> Secure checkout</li>
    <li class="badge"><span aria-hidden="true">🚚</span> Free shipping over $60</li>
    <li class="badge"><span aria-hidden="true">↩️</span> 30-day returns</li>
    <li class="badge"><span aria-hidden="true">⭐</span> 4.8/5 from 12k reviews</li>
  </ul>
  <div class="base d-flex flex-wrap align-items-center justify-content-center text-center">
    <p class="mb-0">© Harbor Supply Co.</p>
    <nav aria-label="Legal"><ul class="nav justify-content-center"><li class="nav-item"><a class="nav-link" href="#">Privacy</a></li><li class="nav-item"><a class="nav-link" href="#">Terms</a></li><li class="nav-item"><a class="nav-link" href="#">Accessibility</a></li><li class="nav-item"><a class="nav-link" href="#">Do not sell my info</a></li></ul></nav>
  </div>
</footer>
CSS 
/* Bootstrap .row-cols-2 / .row-cols-md-5 grid, .nav.flex-column link lists, restyled .badge chips and a .nav legal row. */
.fmega{--fmega-navy:#0e3a5d;--fmega-link:#51607a;--fmega-line:#dde3ec;
  background:#fff;border-top:3px solid var(--fmega-navy);color:#1c2430;line-height:normal}
.fmega .sitemap{max-width:1080px;margin:0 auto;padding:46px 32px 36px}
.fmega .sitemap>.row{--bs-gutter-x:26px;--bs-gutter-y:26px}
.fmega h2{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;line-height:normal;color:var(--fmega-navy);margin-bottom:12px}
.fmega .flex-column{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:4px;--bs-nav-link-font-size:.83rem;--bs-nav-link-font-weight:400;
  --bs-nav-link-color:var(--fmega-link);--bs-nav-link-hover-color:var(--fmega-navy)}
.fmega .flex-column .nav-link{align-self:flex-start}
.fmega .flex-column .nav-link:hover{text-decoration:underline}
.fmega .trust{gap:14px;padding:0 32px 30px}
.fmega .badge{--bs-badge-padding-x:16px;--bs-badge-padding-y:9px;--bs-badge-font-size:.78rem;--bs-badge-font-weight:700;--bs-badge-color:var(--fmega-link);--bs-badge-border-radius:10px;
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--fmega-line);background:#f8fafc;line-height:normal;white-space:normal}
.fmega .base{gap:6px 0;padding:16px;background:var(--fmega-navy);color:#b8d2e6;font-size:.78rem}
.fmega .base .nav{--bs-nav-link-padding-x:10px;--bs-nav-link-padding-y:0;--bs-nav-link-font-size:.78rem;--bs-nav-link-color:#fff;--bs-nav-link-hover-color:#fff}
.fmega .base .nav-item{display:flex;align-items:center}
.fmega .base p::after,.fmega .base .nav-item+.nav-item::before{content:"·"}
.fmega .base p::after{margin-left:10px}
.fmega .base .nav-link:hover{text-decoration:underline}
.fmega .nav-link{border-radius:3px}
.fmega a:focus-visible{outline:2px solid var(--fmega-navy);outline-offset:2px;box-shadow:none}
.fmega .base a:focus-visible{outline-color:#fff}
@media (max-width:767.98px){.fmega .sitemap{padding:40px 20px 32px}.fmega .trust{padding:0 20px 28px;gap:10px}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="border-t-[3px] border-[#0e3a5d] bg-white leading-[normal] text-[#1c2430] [&_a]:rounded-[3px] [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-[#0e3a5d]">
  <div class="mx-auto grid max-w-[1080px] grid-cols-2 gap-[26px] px-5 pt-10 pb-8 md:grid-cols-5 md:px-8 md:pt-[46px] md:pb-9 [&_h2]:mb-3 [&_h2]:text-[.72rem] [&_h2]:font-extrabold [&_h2]:tracking-[.09em] [&_h2]:text-[#0e3a5d] [&_h2]:uppercase [&_ul_a]:block [&_ul_a]:py-1 [&_ul_a]:text-[.83rem] [&_ul_a]:text-[#51607a] [&_ul_a:hover]:text-[#0e3a5d] [&_ul_a:hover]:underline">
    <nav aria-labelledby="fmega-shop"><h2 id="fmega-shop">Shop</h2>
      <ul><li><a href="#">New arrivals</a></li><li><a href="#">Best sellers</a></li><li><a href="#">Deals</a></li><li><a href="#">Gift cards</a></li><li><a href="#">Clearance</a></li></ul></nav>
    <nav aria-labelledby="fmega-help"><h2 id="fmega-help">Help</h2>
      <ul><li><a href="#">Order status</a></li><li><a href="#">Shipping</a></li><li><a href="#">Returns</a></li><li><a href="#">Size guides</a></li><li><a href="#">Contact us</a></li></ul></nav>
    <nav aria-labelledby="fmega-company"><h2 id="fmega-company">Company</h2>
      <ul><li><a href="#">Our story</a></li><li><a href="#">Stores</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Sustainability</a></li></ul></nav>
    <nav aria-labelledby="fmega-account"><h2 id="fmega-account">Account</h2>
      <ul><li><a href="#">Sign in</a></li><li><a href="#">Register</a></li><li><a href="#">Order history</a></li><li><a href="#">Wishlist</a></li><li><a href="#">Rewards</a></li></ul></nav>
    <nav aria-labelledby="fmega-resources"><h2 id="fmega-resources">Resources</h2>
      <ul><li><a href="#">Blog</a></li><li><a href="#">Buying guides</a></li><li><a href="#">Affiliates</a></li><li><a href="#">Wholesale</a></li><li><a href="#">Developers</a></li></ul></nav>
  </div>
  <ul class="flex flex-wrap justify-center gap-2.5 px-5 pb-7 md:gap-3.5 md:px-8 md:pb-[30px] [&_li]:inline-flex [&_li]:items-center [&_li]:gap-2 [&_li]:rounded-[10px] [&_li]:border [&_li]:border-[#dde3ec] [&_li]:bg-[#f8fafc] [&_li]:px-4 [&_li]:py-[9px] [&_li]:text-[.78rem] [&_li]:font-bold [&_li]:text-[#51607a]">
    <li><span aria-hidden="true">🔒</span> Secure checkout</li>
    <li><span aria-hidden="true">🚚</span> Free shipping over $60</li>
    <li><span aria-hidden="true">↩️</span> 30-day returns</li>
    <li><span aria-hidden="true">⭐</span> 4.8/5 from 12k reviews</li>
  </ul>
  <div class="flex flex-wrap items-center justify-center gap-y-1.5 bg-[#0e3a5d] p-4 text-center text-[.78rem] text-[#b8d2e6]">
    <p class="after:ml-2.5 after:content-['·']">© Harbor Supply Co.</p>
    <nav aria-label="Legal"><ul class="flex flex-wrap justify-center [&_a]:mx-2.5 [&_a]:text-white [&_a:hover]:underline [&_a:focus-visible]:outline-white! [&_li+li]:before:content-['·']"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Accessibility</a></li><li><a href="#">Do not sell my info</a></li></ul></nav>
  </div>
</footer>

About this set

A full sitemap footer for online shops and larger sites. Five equal columns, Shop, Help, Company, Account and Resources, each hold five links under a navy uppercase heading, so visitors who scroll to the bottom can reach order status, returns, gift cards or careers in one click. Under the columns a centred row of four trust badges repeats the promises that matter at checkout: secure checkout, free shipping over a threshold, 30-day returns and a review score. A solid navy bar closes the page with the copyright and four legal links, including Accessibility and Do not sell my info, separated by middle dots drawn in CSS. A thick navy top border ties the footer to the bar. Below 768px the five columns become two and the badges wrap into a stack, with no horizontal scroll at 375px. Use it for ecommerce stores, marketplaces and content-heavy sites that need a real sitemap in the footer. The Bootstrap version uses .row-cols-2 and .row-cols-md-5, .nav.flex-column lists, restyled .badge chips and a .nav legal row.

What’s included

  • Five labelled link columns with five links each
  • Trust badge row for checkout promises
  • Navy legal bar with CSS dot separators
  • Two columns below 768px
  • No JavaScript

Accessibility

Each column is a nav labelled by its h2 heading and the legal links sit in a nav labelled Legal. The emoji in the trust badges are hidden from screen readers so only the text is read. Links show a 2px navy focus outline, white on the navy bar, and every text colour reaches 4.5:1.

Customise it

Change --fmega-navy, --fmega-link and --fmega-line on .fmega in the plain CSS and Bootstrap versions; Bootstrap also reads --bs-nav-link-* and --bs-badge-* there. In Tailwind edit #0e3a5d and #51607a in the utility classes.