展现形式 · 概念

Navigation Menu：导航菜单与 Mega Menu

说明主导航、下拉菜单、Mega Menu、移动端抽屉菜单与面包屑的适用边界，依据 W3C APG 与 WAI 教程核对 role=menu 的取舍、hover 与键盘触发、层级深度和面包屑结构。

Navigation Menu 把一个站点或区域的目的地组织成有层级的链接集合，包括主导航、下拉菜单、Mega Menu、移动端抽屉菜单和面包屑。它的项目是“去往别处”的链接，而不是当前页面里的操作命令；同页切换视图应使用 Tabs。Mega Menu 是顶层项展开的多分组面板，本质仍是导航。

适合与不适合

适合目的地较多、层级稳定、需要跨页面长期可达的入口，例如商品分类、支持资源、品牌信息。入口很少时直接平铺更快；不适合把促销位、搜索、表单或需要选择的配置塞进菜单面板，也不应让菜单成为某个页面的唯一发现路径。

与相邻模式的区别

对照	判据
Tabs	Tabs 在同页切换互斥视图，不换页；菜单项是链接，激活后换到新目的地
Accordion	下拉菜单的展开机制与 Disclosure 相同，区别在内容：Accordion 展开的是阅读内容，菜单展开的是去向
Drawer	Drawer 是承载面板，菜单是其中一种内容；移动端抽屉菜单由两者组合，焦点契约按 Drawer 执行
Modal	移动端全屏菜单一旦阻断背景，就具有 Modal 行为，需要满足其焦点进入、循环与返回要求
List	静态链接列表是菜单的退化形态；菜单在其上增加展开状态、当前位置和跨页面一致性

优点与缺点

优点	缺点
全站一致的入口，降低找路成本	层级越深，越依赖精确指针和记忆
Mega Menu 可一次展示品类全貌	面板拥挤，小屏与触摸设备难以复刻
面包屑给出当前位置与上级入口	多集合商品的层级不唯一，容易误导
结构清晰时利于辅助技术导航	手写 hover 逻辑易误触、误关闭

内容与交互要求

标签：用目的地名词，与目标页标题一致；同一站点内命名不漂移。
顶层项既是链接又要展开时：用“链接 + 独立展开按钮”两个控件。WAI Fly-Out 教程给出两种做法：父项本身作切换，或单独按钮作切换；前者使父项无法直接跳转。
触发：hover 只能是增强，click 与键盘必须可用。教程要求用 Tab 遍历时不应自动打开子菜单，以免逐项穿越；示例用脚本延迟约 1 秒再关闭，以容纳不精确的指针。
层级深度：以顶层加一层为主，深于两级应让分类页承担导航。Mega Menu 面板用带标题的短链接分组，附“查看全部”链接到集合页；图片与推荐位只作补充，不承载唯一入口。
面包屑：从首页到当前页的上级链接。商品同属多个集合时，按顾客实际到达路径或指定主集合，不要随机取一个。

响应式与无障碍

导航地标：用 nav 与列表表达结构；页面有多个导航区域（主导航、页脚、面包屑）时，每个都要有简短且可区分的名称（WAI Menus 结构页）。
不必用 role=menu：APG 的 Disclosure Navigation 示例明确不使用 menu 角色，理由是常规站点导航不需要 menu 与 menubar 模式规定的全部键盘交互；WAI Fly-Out 教程同样用 nav、ul 和 aria-expanded。APG Menubar 页把 menu 描述为像操作系统菜单的部件，本次未见该页明文禁止用于导航，但两处示例都不采用。
展开按钮与键盘：按钮带 aria-expanded 与 aria-controls；Tab 在按钮与已展开链接间移动，Enter 或 Space 切换，Escape 关闭并把焦点返回按钮；方向键与 Home、End 为可选增强。
当前页：aria-current="page" 标在当前页链接上，同一组只标一个（MDN）。
面包屑：包在带名称的导航地标里，当前页项设置 aria-current="page"；当前页若不是链接可省略（APG Breadcrumb）。
WCAG 2.2：1.4.13 Content on Hover or Focus（AA）要求悬停或聚焦出现的内容可关闭、可悬停、持久；2.5.8 Target Size (Minimum)（AA）要求指针目标至少 24×24 CSS 像素，另有间距等例外；3.2.3 Consistent Navigation（AA）要求重复出现的导航顺序一致；2.4.8 Location（AAA）要求提供当前位置信息。
小屏：WAI 要求菜单结构在不同屏幕尺寸一致，可折叠，但可见项的顺序、措辞与去向不变。抽屉触发按钮要有可访问名称和展开状态。

Liquid linklist 页写明菜单最多 3 层；link 对象提供 active、current、child_active、child_current、levels、links 等属性。
帮助中心写明多数主题支持最多两层下拉（指顶层项之下的两层嵌套，即菜单共三层；Liquid 侧 linklist 页也写最多 3 层）显示位置由主题决定，部分主题需要为移动端调整 CSS；具体主题以其文档和固定版本源码为准。
within 过滤器生成带集合上下文的商品 URL，页面提示需评估对 SEO 的影响。
Google Breadcrumb 文档写明：面包屑标记至少含两个列表项，每项含 position、name 与 item（最后一项可省略 item）；建议表达典型用户路径而非镜像 URL；到达路径不唯一时可标记多条；该功能在桌面搜索结果适用。本篇只转述页面所写，不对展示效果作保证。
Shopify 是否提供面包屑专用对象未核验：shopify.dev/docs/api/liquid/objects/breadcrumb 返回 404，不构成不存在的证据。
Header、Footer 的区域职责见全局店面区域，Horizon 的页眉与窄屏菜单检查入口见布局与导航。