职责与结构
菜单承载一组即时操作。页面导航使用链接，持久工具面板使用工具导航，表单选择使用 Select。
有名称的原生触发按钮 + aria-controls / aria-haspopup / aria-expanded + role=menu 的操作集合；每次只有一个可用项进入 Tab 顺序。
变体与 Tokens
| 项目 | 规范 |
|---|---|
| 触发菜单 | 点击或方向键打开，Esc 关闭并返回触发器。 |
| 静态菜单 | 保留一个可聚焦操作；方向键、Home、End 在可用项中移动。 |
| 禁用操作 | disabled / aria-disabled=true 保留说明，不进入菜单焦点序列。 |
复用 .menu / .menu-option、--surface-glass-strong、--radius-md、--shadow-2、--layer-menu 和共享焦点轮廓。
交互与状态示例
交互与无障碍
ArrowDown / ArrowUp 循环浏览可用项，Home / End 到首尾。Tab 关闭弹出菜单并前往触发器之后的下一可见控件；Shift+Tab 返回触发器。禁用及隐藏项跳过；全部不可用时聚焦菜单容器，Esc 仍可返回。动作打开新浮层时保留新焦点；嵌套菜单只管理自身条目。Esc、外点或焦点离开关闭，静态菜单不强行恢复不存在的触发器。
接入约定
| 项目 | 规范 |
|---|---|
| data-dropdown / aria-controls | 触发器指向唯一菜单 ID，菜单可在触发器后方；现有下拉兼容此协议。 |
| 操作事件 | 按钮继续使用自己的 click 处理器，控制器仅维护菜单开闭与焦点。 |
| window.dsOverlays.init(host) | 幂等初始化，新增菜单由共享观察器初始化；原菜单动作和原生禁用语义保留。 |
查看最小使用示例
<button data-dropdown aria-controls="actions" aria-haspopup="menu" aria-expanded="false">操作</button>
<div class="menu" role="menu" id="actions" hidden>
<button role="menuitem" type="button">复制</button>
</div>维护位置：scripts/overlay-specimens.mjs；示例行为：scripts/overlay-behavior.js。组合应用见本页末尾引用。