Design Lab · Components

Nav & Footer Pairings

Five complete header-and-footer sets, each a different structural temperament — from the dependable column footer to a full-drawer editorial system. Every pairing is shown bookending a framed page so the nav and footer read as one coherent shell.

05 pairingsworking drawer + mega-menuNAP-readyresponsive → 360px
01 Classic bar & columns Logo-left utility bar with a four-column footer, newsletter and legal row.
Premium local service

Considered work for clients who notice the details.

A dependable top bar pairs with a structured footer — the layout most visitors already know how to read.

02 Centered wordmark & minimal footer Links split either side of a serif wordmark; a single tidy footer row.
Est. Northcote

Quiet confidence, evenly balanced on both sides of the mark.

For boutique brands where symmetry signals care. The footer stays out of the way.

03 Drawer nav & editorial footer Hamburger opens a full drawer (try it); a large footer with CTA, sitemap and contact.
For editorial & portfolio

A spare top line that hands the storytelling to a full-screen menu.

Open the drawer to see the navigation take over. The footer below carries the heavy lifting.

04 Sticky utility bar & compact footer Phone / hours / rating strip stays pinned above the nav (scroll the panel); compact NAP footer with socials.
01234 567 890 Mon–Fri 8–6 · Sat 9–1
▲ 4.9 rated Members area ↗

↓ Scroll this panel — the utility strip stays pinned

Hours, phone and rating, always within reach.

Service businesses live or die on a visible phone number. This utility strip pins to the top of the panel while everything else scrolls beneath it.

page content
page content
Northcote & Co. — 14 Harbour Lane, Northcote
hello@northcoteandco.example · 01234 567 890 · Mon–Fri 8–6, Sat 9–1
© 2026 · Privacy · Terms
05 Mega-menu nav & full-bleed CTA footer "Services" opens a rich mega-menu (click it); a bold full-bleed call-to-action footer.
Services-led navigation

When the offer is the hero, give it room to breathe.

Click “Services” above to drop the mega-menu. Below, a full-bleed footer ends the page on a single, loud invitation.

Northcote & Co. · sample content · Design Lab