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
| Variable | Description |
|---|
| INLINECODE10 | Data directory (default: ~/.header/) |
Powered by BytesAgain | bytesagain.com | hello@bytesagain.comHeader — 网页头部与导航设计参考
用于设计和实现网页头部、导航栏及响应式菜单系统的快速参考技能。
使用场景
- - 设计包含主导航的网站头部
- 实现带有滚动效果的粘性/固定头部行为
- 构建响应式汉堡菜单和移动端导航
- 使用适当的ARIA角色实现无障碍头部
- 为不同类型的网站选择合适的导航模式
命令
intro
bash
scripts/script.sh intro
头部设计概述 — 用途、构成与核心原则。
patterns
bash
scripts/script.sh patterns
导航模式 — 水平导航、巨型菜单、侧边栏、面包屑导航。
sticky
bash
scripts/script.sh sticky
粘性与固定头部技术 — 滚动行为、收缩效果、滚动显示。
responsive
bash
scripts/script.sh responsive
响应式导航 — 汉堡菜单、侧滑菜单、优先级+模式。
html
bash
scripts/script.sh html
头部的语义化HTML — 正确的地标元素、ARIA角色、跳过导航。
css
bash
scripts/script.sh css
头部的CSS模式 — Flexbox布局、下拉菜单、过渡动画。
accessibility
bash
scripts/script.sh accessibility
无障碍 — 键盘导航、焦点管理、屏幕阅读器支持。
examples
bash
scripts/script.sh examples
真实世界的头部示例与实现模式。
help
bash
scripts/script.sh help
version
bash
scripts/script.sh version
配置
| 变量 | 描述 |
|---|
| HEADER_DIR | 数据目录（默认：~/.header/） |
由BytesAgain提供 | bytesagain.com | hello@bytesagain.com
