Header — Web Header & Navigation Design Reference
Quick-reference skill for designing and implementing web page headers, navigation bars, and responsive menu systems.
When to Use
- Designing a website header with primary navigation
- Implementing sticky/fixed header behavior with scroll effects
- Building responsive hamburger menus and mobile navigation
- Making headers accessible with proper ARIA roles
- Choosing the right navigation pattern for the site type
Commands
intro
scripts/script.sh intro
Overview of header design — purpose, anatomy, and core principles.
patterns
scripts/script.sh patterns
Navigation patterns — horizontal nav, mega menu, sidebar, breadcrumbs.
sticky
scripts/script.sh sticky
Sticky and fixed header techniques — scroll behavior, shrinking, reveal-on-scroll.
responsive
scripts/script.sh responsive
Responsive navigation — hamburger menus, off-canvas, priority+ pattern.
html
scripts/script.sh html
Semantic HTML for headers — proper landmarks, ARIA roles, skip navigation.
css
scripts/script.sh css
CSS patterns for headers — flexbox layouts, dropdowns, transitions.
accessibility
scripts/script.sh accessibility
Accessibility — keyboard navigation, focus management, screen reader support.
examples
scripts/script.sh examples
Real-world header examples and implementation patterns.
help
scripts/script.sh help
version
scripts/script.sh version
Configuration
| Variable | Description |
|---|---|
HEADER_DIR |
Data directory (default: ~/.header/) |
Powered by BytesAgain | bytesagain.com | hello@bytesagain.com