header

# 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 | Variable | Description | |----------|-------------| | `HEADER_DIR` | Data directory (default: ~/.header/) | --- *Powered by BytesAgain | bytesagain.com | hello@bytesagain.com*