用途：汉堡菜单是三条线图标（☰），主要用于移动端和小屏设备，点击后展开隐藏的导航面板，再次关闭。它在小视口下节省屏幕空间，同时把完整导航收在一个通用的交互入口后面。
主要能力与使用场景：适合移动或响应式网站、在小屏单行放不下的多导航项站点、模仿原生体验的 PWA、桌面导航的响应式改造、导航项较多的管理后台或复杂应用。应避免用于只有 3-4 个导航项、能直接显示的站点，桌面端、空间充裕的应用，以及导航可见性关键的场景（如对比工具），或数据显示用户很少使用隐藏菜单时。
必要用法与无障碍：切换元素须用 <button>，带 aria-expanded 和 aria-controls；aria-label 描述当前动作（“Open menu”/“Close menu”）；打开时把焦点移入面板首个可聚焦元素并限制在面板内，按 Escape 关闭并把焦点还给按钮；不要用 div/span 作切换元素，不要让焦点逃出遮罩，不要移除菜单链接的可见焦点指示。
性能目标：点击后视觉反馈 < 50ms；面板动画 250-300ms、60fps；打开后 100ms 内可交互；汉堡组件含样式 < 3KB；动画只用 transform/opacity 以走 GPU。可用 CSS 渐进增强（:has() 或 checkbox 技巧）实现无 JS 基础。
限制与常见错误：桌面端误用会降低可发现性并增加点击，应在断点（常见 768px 或 1024px）以下才启用；缺少焦点管理会让键盘用户迷失；缺少 Escape 支持会迫使键盘用户去 Tab 到关闭按钮。完整实现细节、示例和测试说明见 references/pattern.md。