用途：导航菜单是网站或应用中横向或纵向的主链接栏，构成站点架构的主干，为用户提供持续可见的站点地图和当前位置指示。适用于任何多页网站、具有独立功能区的 Web 应用、包含产品/定价/关于/联系页面的营销站、按类别组织的文档站，以及按部门划分的内网与门户。不适合单页且无独立分区的站点（改用锚点或滚动）、更适合侧边栏或巨幕菜单的深层嵌套层级、遵循平台惯例使用底部标签栏的纯移动应用，以及用线性步骤导航取代自由导航的向导或结账流程。
主要能力与实现要点：实现前先确认该模式与问题及约束匹配，再从 references/pattern.md 的解剖与示例出发选择最小可行变体，先落实无障碍、性能与交互护栏，再做视觉打磨。无障碍要求包括：使用带 aria-label 的 <nav> 元素提供地标导航；在活动链接上用 aria-current="page" 标记当前页；下拉触发器使用带 aria-expanded 与 aria-haspopup 的 <button>；支持键盘操作（Tab 移动、Enter 激活、Escape 关闭下拉）；确保所有交互元素有可见焦点指示。避免用 <div> 加点击处理器代替语义化的 <nav>、<ul>、<a>、<button>；避免仅靠悬停打开下拉而无点击或键盘替代；避免嵌套多个 <nav> 而不给各自不同的 aria-label。
性能目标与优化：导航组件首次渲染目标小于 50ms；下拉从触发到可见小于 100ms；粘性行为使用 position: sticky 而非 JavaScript 以避免滚动卡顿；含样式的导航组件包体小于 3KB；初始渲染后布局不偏移（CLS 为 0）。优化策略是优先使用语义化 HTML，基础导航无需 JavaScript。
常见错误与修复：顶层项过多（超过 10 个）会导致换行、溢出或标签截断，应限制为 5-7 个顶层项，把多余项归入更宽泛的分类或移入次级导航；缺少活动状态导致用户无法判断所在页面，应通过颜色、字重、下划线突出当前链接并加上 aria-current="page"；仅悬停打开下拉会阻碍键盘与触屏用户，应改为点击/轻触切换，并支持 Enter/Space 打开、Escape 关闭。
相关模式与延伸：面包屑、汉堡菜单、侧边栏、标签页。完整实现细节、示例与测试说明见 references/pattern.md。