Header

---
name: "header"
version: "1.0.0"
description: "Header design reference — navigation patterns, sticky headers, responsive menus, accessibility. Use when designing website headers or implementing navigation components."
author: "BytesAgain"
homepage: "https://bytesagain.com"
source: "https://github.com/bytesagain/ai-skills"
tags: [header, navigation, web, ui, navbar, responsive, frontend, menu]
category: "frontend"
---

# 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*