tezvyn:

Footer Layout Patterns

AI-drafted, machine-checkedSource: designsystem.digital.govbeginner

A footer is a safety net for users who reach the bottom of a page without finding what they need. Use a "Big" footer for complex sites, "Medium" for standard ones, and "Slim" for simple pages.

WHY IT EXISTS A footer serves visitors who arrive at the bottom of a page without finding what they were looking for. It acts as a last-resort navigation tool, a comprehensive sitemap, and a place for secondary information that doesn't belong in the main header navigation.

THE MENTAL MODEL Think of a footer as the safety net of your website. It catches users who have scrolled all the way down, preventing them from hitting a dead end and leaving. While the header is the grand entrance, the footer is the well-organized utility room containing important but less-frequently-accessed links, contact info, and legal notices.

HOW IT WORKS Footers are not one-size-fits-all. The U.S. Web Design System (USWDS) defines three common patterns based on site complexity. First, the Big Footer is for large, complex websites, organized into columns with topic headings and secondary links, like a mini-sitemap. Second, the Medium Footer is a balanced choice for standard sites, replacing columns with a single row of primary links above contact information. Third, the Slim Footer is a compact option for simple sites, providing only the most critical links and contact details to save space.

WHEN TO USE IT A footer should be present on almost every page to provide consistency, trust signals (like contact info), and persistent navigation. The key is to select the right pattern for your site's scale. A large site with many sections needs a Big Footer to help users navigate. A simple marketing site can use a Slim Footer effectively.

WHEN NOT TO USE IT Avoid footers in highly focused, immersive contexts where any external link is a distraction, such as a multi-step checkout flow or a full-screen modal. In these cases, the goal is to keep the user on a single path. However, the footer should be restored on the final confirmation or summary page.

ONE CANONICAL EXAMPLE For a large government portal like a main department website, a "Big" footer with columns for different topics and sub-agencies is appropriate. For a smaller, single-agency site, a "Medium" footer with a handful of primary links is sufficient. For a temporary campaign microsite, a "Slim" footer provides essential contact and legal info without adding clutter.

Read the original → designsystem.digital.gov

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.