COMPONENT 16 · Actions & Menus

下拉菜单

Dropdown Menu

也叫Pull-down MenuMenu Button下拉操作菜单NSPopUpButton

由触发器打开并列出一组操作的临时菜单。

A temporary action menu opened from a trigger.

ANATOMY & USAGE

结构与使用建议

组成部分

菜单触发器
菜单容器
菜单项

适合使用

相关动作较多但无需常驻显示时。

不建议使用

用户是在表单中选择一个值时，应优先 Select 或 Combobox。

键盘与无障碍

触发器同步 aria-expanded；菜单支持方向键、Home/End、Escape，并关闭后恢复焦点。

DESCRIBE IT TO AI

这样告诉编程助手

实现下拉菜单（Dropdown Menu）：由触发器打开并列出一组操作的临时菜单。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<div class="demo stack">
  <button type="button" aria-haspopup="menu" aria-expanded="false">打开下拉菜单</button>
  <div role="menu" hidden>
    <button role="menuitem" tabindex="-1">重命名</button>
    <button role="menuitem" tabindex="-1">复制</button>
  </div>
  <output>尚未执行操作</output>
</div>