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#

bash

scripts/script.sh intro

Overview of header design — purpose, anatomy, and core principles.

patterns#

bash

scripts/script.sh patterns

Navigation patterns — horizontal nav, mega menu, sidebar, breadcrumbs.

sticky#

bash

scripts/script.sh sticky

Sticky and fixed header techniques — scroll behavior, shrinking, reveal-on-scroll.

responsive#

bash

scripts/script.sh responsive

Responsive navigation — hamburger menus, off-canvas, priority+ pattern.

html#

bash

scripts/script.sh html

Semantic HTML for headers — proper landmarks, ARIA roles, skip navigation.

css#

bash

scripts/script.sh css

CSS patterns for headers — flexbox layouts, dropdowns, transitions.

accessibility#

bash

scripts/script.sh accessibility

Accessibility — keyboard navigation, focus management, screen reader support.

examples#

bash

scripts/script.sh examples

Real-world header examples and implementation patterns.

help#

bash

scripts/script.sh help

version#

bash

scripts/script.sh version

Configuration#

VariableDescriptionHEADER_DIRData directory (default: ~/.header/)

---

Powered by BytesAgain | bytesagain.com | hello@bytesagain.com