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

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