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

CODEBLOCK0

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

patterns

CODEBLOCK1

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

sticky

CODEBLOCK2

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

responsive

CODEBLOCK3

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

html

CODEBLOCK4

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

css

CODEBLOCK5

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

accessibility

CODEBLOCK6

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

examples

CODEBLOCK7

Real-world header examples and implementation patterns.

help

CODEBLOCK8

version

CODEBLOCK9

Configuration