Fat Footer (Sitemap Style) Template

Provide a complete, at-a-glance sitemap for your users with this comprehensive "fat footer" template.

This large-format footer is designed for content-rich websites, helping users discover pages they might have missed and improving overall site navigation and SEO by exposing key internal links.

Screenshot of a large, multi-column 'fat footer' with numerous link categories and a final copyright bar.

Get Source Code Preview

About this Fat Footer Template

A "fat footer" acts as a secondary navigation hub for your entire website. By presenting a wide range of links in an organized, multi-column layout, it gives lost users a final chance to find what they're looking for before leaving the page. This template uses a powerful and modern CSS Grid layout that is both robust and elegantly responsive.

Features

Comprehensive Sitemap: The multi-column layout allows for extensive link categorization, perfect for deep websites.
Fluidly Responsive: Built with an advanced CSS Grid technique, the columns automatically reflow and stack based on the available screen space, eliminating the need for complex media queries.
SEO-Friendly: Exposes a rich set of internal links on every page, which can help search engines discover and index your content more effectively.
Organized & Scannable: Clear headings for each column allow users to quickly scan for the section they need.
Accessible Design: Uses proper heading structure (h3), semantic elements, and a separate sub-footer for legal and social information.

Ideal Use Cases

Large E-commerce websites with many product categories.
News, magazine, and media portals.
University or large corporate websites.
Community forums or large-scale blogs.
Any website with a deep or complex navigation structure.

Code Breakdown

The magic of this template lies in a single line of CSS. The main container, .fat-footer__main, uses display: grid and a clever grid-template-columns value: repeat(auto-fit, minmax(220px, 1fr)).

Here's what that does:

repeat(...): Tells the browser to create as many columns as it can.
auto-fit: Fits as many columns as possible into the available width. If space runs out, it moves the next item to a new row.
minmax(220px, 1fr): Each column will have a minimum width of 220px but can grow larger to fill any extra space (1fr).

This combination creates a perfectly fluid grid that adapts to any screen size without needing specific breakpoints. On a wide desktop, you might see 4 or 5 columns. On a tablet, it might reflow to 2 or 3. On a mobile phone, it will elegantly stack into a single column. The bottom bar uses Flexbox for simple alignment of the copyright and social links.

Code

Here's the full code for the footer template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fat Footer (Sitemap Style)</title>
    <style>
        :root {
            --footer-bg: #2c3e50;
            --footer-text-color: #bdc3c7;
            --footer-heading-color: #ffffff;
            --footer-link-hover-color: #3498db;
            --footer-bottom-bg: #233140;
        }

/* Basic body styles for demonstration */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            display: grid;
            grid-template-rows: 1fr auto;
            min-height: 100vh;
            background-color: #ecf0f1;
        }

.main-content {
            padding: 2rem;
        }

/* FOOTER STYLES START HERE */

.fat-footer {
            background-color: var(--footer-bg);
            color: var(--footer-text-color);
            font-size: 0.9rem;
        }

.fat-footer__container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 3rem 1.5rem;
        }

.fat-footer__main {
            display: grid;
            /* This is for the responsive layout */
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 2rem;
        }
        
        .fat-footer__column h3 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--footer-heading-color);
            margin-top: 0;
            margin-bottom: 1.25rem;
        }

.fat-footer__column ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .fat-footer__column li {
            margin-bottom: 0.75rem;
        }

.fat-footer__column a {
            color: var(--footer-text-color);
            text-decoration: none;
            transition: color 0.2s ease-in-out;
        }

.fat-footer__column a:hover {
            color: var(--footer-link-hover-color);
        }

.fat-footer__bottom {
            background-color: var(--footer-bottom-bg);
            padding: 1.5rem;
            margin-top: 3rem;
            font-size: 0.875rem;
            
            display: flex;
            flex-wrap: wrap; /* Allows items to wrap on very small screens */
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

.fat-footer__copyright {
            margin: 0;
            text-align: center;
            flex-grow: 1; /* Allows it to take up space */
        }
        
        .fat-footer__social {
            text-align: center;
            flex-grow: 1;
        }

.fat-footer__social ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: inline-flex; /* Use inline-flex to keep icons together */
            gap: 1.5rem;
        }

.fat-footer__social a {
            color: var(--footer-text-color);
            transition: color 0.2s ease-in-out;
        }
        
        .fat-footer__social a:hover {
            color: var(--footer-link-hover-color);
        }

.fat-footer__social svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }
        
        /* On larger screens, don't let copyright and social links grow too much */
        @media (min-width: 576px) {
            .fat-footer__copyright, .fat-footer__social {
                flex-grow: 0;
            }
        }
        
    </style>
</head>
<body>

<main class="main-content">
        <h1>Fat Footer (Sitemap Style)</h1>
        <p>Resize your browser window to see the columns automatically reflow.</p>
    </main>
    
    
    <footer class="fat-footer" role="contentinfo">
        <div class="fat-footer__container">
            <div class="fat-footer__main">
                
                <div class="fat-footer__column">
                    <h3>Shop by Category</h3>
                    <ul>
                        <li><a href="#">Electronics</a></li>
                        <li><a href="#">Fashion & Apparel</a></li>
                        <li><a href="#">Home & Garden</a></li>
                        <li><a href="#">Sports & Outdoors</a></li>
                        <li><a href="#">Books & Media</a></li>
                        <li><a href="#">Toys & Hobbies</a></li>
                    </ul>
                </div>

<div class="fat-footer__column">
                    <h3>Customer Service</h3>
                    <ul>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">Track Your Order</a></li>
                        <li><a href="#">Shipping Policy</a></li>
                        <li><a href="#">Returns & Exchanges</a></li>
                        <li><a href="#">Frequently Asked Questions</a></li>
                        <li><a href="#">Size Guides</a></li>
                    </ul>
                </div>

<div class="fat-footer__column">
                    <h3>About Our Company</h3>
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Our Story</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Press Releases</a></li>
                        <li><a href="#">Affiliate Program</a></li>
                    </ul>
                </div>

<div class="fat-footer__column">
                    <h3>Connect With Us</h3>
                    <ul>
                        <li><a href="#">Newsletter Signup</a></li>
                        <li><a href="#">Our Blog</a></li>
                        <li><a href="#">Community Forum</a></li>
                        <li><a href="#">Events</a></li>
                    </ul>
                </div>

</div>
        </div>
        <div class="fat-footer__bottom">
            <p class="fat-footer__copyright">&copy; 2024 YourBrand Inc. All Rights Reserved.</p>
            <nav class="fat-footer__social" aria-label="Social Media">
                <ul>
                    <li><a href="#" aria-label="Our Facebook Profile"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><title>Facebook</title><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.35C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg></a></li>
                    <li><a href="#" aria-label="Our Instagram Profile"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.784.297-1.459.717-2.126 1.384S.926 3.356.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.297.784.717 1.459 1.384 2.126.667.666 1.342 1.089 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.784-.297 1.459-.718 2.126-1.384.666-.667 1.089-1.342 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.148-.558-2.913-.297-.784-.718-1.459-1.384-2.126C21.314 1.64 20.64 1.217 19.856.92c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.056 1.17-.249 1.805-.413 2.227-.217.562-.477.96-.896 1.382-.42.419-.819.679-1.381.896-.422.164-1.057.36-2.227.413-1.266.057-1.646.07-4.85.07s-3.585-.015-4.85-.074c-1.17-.056-1.805-.249-2.227-.413-.562-.217-.96-.477-1.382-.896-.419-.42-.679-.819-.896-1.381-.164-.422-.36-1.057-.413-2.227-.057-1.266-.07-1.646-.07-4.85s.015-3.585.074-4.85c.056-1.17.249-1.805.413-2.227.217-.562.477-.96.896-1.382.42-.419.819-.679 1.381-.896.422-.164 1.057-.36 2.227-.413 1.266-.057 1.646-.07 4.85-.07zM12 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z"/></svg></a></li>
                    <li><a href="#" aria-label="Our YouTube Channel"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><title>YouTube</title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></a></li>
                </ul>
            </nav>
        </div>
    </footer>

</body>
</html>

View Output