# Header

> Header design reference — navigation patterns, sticky headers, responsive menus, accessibility. Use when designing website headers or implementing navigation components.

- Skill: `bytesagain/header` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add bytesagain/header`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bytesagain/header/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: bytesagain (https://skillmd.com/u/bytesagain)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/bytesagain/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*