# Header Footer Patterns

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

- Skill: `dragoon0x/header-footer-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/header-footer-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/header-footer-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/header-footer-patterns

---


# 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).