header-footer
Installation
SKILL.md
Header & Footer Patterns
Header
- Height: 48-64px (compact apps), 64-80px (marketing sites)
- Contents: Logo (left), navigation (center or right), actions (right)
- Sticky: Consider sticky for long-scroll pages, but it steals vertical space
- Compact on scroll: Reduce height and hide secondary items when scrolling down
Header Hierarchy
| Element | Priority | Position |
|---|---|---|
| Logo/brand | Always visible | Left |
| Primary nav | Always visible (desktop) | Center or left |
| Search | Visible or icon-toggle | Center or right |
| User menu | Always visible (logged in) | Right |
| CTA | Optional | Right |