Header Footer Patterns

Header design, footer architecture, sticky headers, and global navigation patterns.

dragoon0x 34920eb 1.1 KB Updated

File contents

Header Footer Patterns

Header Patterns

Marketing Site

  • Logo (left) + Nav items (center or right) + CTA button (right).
  • Transparent on hero, solid on scroll.
  • Height: 64-80px.
  • Hamburger on mobile (< 768px).

Web App

  • Logo + Breadcrumb/page title (left) + Search (center) + Actions + User menu (right).
  • Always solid background. Fixed/sticky on scroll.
  • Height: 48-64px.

Sticky Header

  • Reduce height on scroll (80px → 56px).
  • Hide on scroll down, show on scroll up (smart hide).
  • Never sticky on mobile for content-reading pages.

Footer Patterns

Minimal

  • Copyright + Legal links (Privacy, Terms) + Social links.
  • Single row. Used for apps and simple sites.

Standard

  • 3-4 column grid with link groups.
  • Newsletter signup.
  • Social icons.
  • Logo + copyright at bottom.

Extended

  • Full sitemap-style navigation.
  • Contact information.
  • App download badges.
  • Trust badges (security, certifications).

dragoon0x/everything-design-taste/tree/main/skills/header-footer-patterns commit 34920eb241

Frequently asked questions

npx skillmds@latest add dragoon0x/header-footer-patterns