下拉菜单 Dropdown
页面上的命令过多时，可将备选命令收纳到向下展开的浮层容器中。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基础用法：基础下拉菜单。
- 弹出方向：通过
position支持指定 6 种弹出方位，分别是：top: 向上,tl: 左上,tr: 右上,bottom: 下方,bl: 左下(默认),br: 右下。 - 其他元素：设置 Menu 禁用项和插入分割线。
- 触发方式：通过
trigger指定触发方式。 - 触发事件：通过
Menu.onClickMenuItem来为菜单指定点击菜单项时触发的回调函数。 - 按钮下拉框：使用
<Dropdown.Button>可以使用右边是额外的相关功能菜单的按钮。 - 多级菜单：带有多级菜单的下拉框。
- 隐藏菜单：通过
popupVisible和onVisibleChange控制下拉框的展开和收起。具体onVisibleChange的触发时机可查看Trigger组件文档。 如果droplist是Menu，可以通过在onClickMenuItem中返回false来避免菜单自动隐藏。 - 分组菜单：通过
Menu.ItemGroup使用分组。 - 右键菜单：移入区域后，可点击鼠标右键触发。
- 带图标的菜单：菜单项前可以添加图标。
示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。
API
Dropdown
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| defaultPopupVisible | 控制下拉框是否默认打开 | boolean | - | - |
| disabled | 是否禁用弹出 | boolean | - | 2.16.0 |
| popupVisible | 控制下拉框是否打开（受控模式） | boolean | - | - |
| unmountOnExit | 隐藏后是否销毁 DOM 结构 | boolean | true | - |
| position | 下拉框的弹出位置 | 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | bl | - |
| trigger | 触发下拉框弹出的方式 | TriggerProps['trigger'] | hover | - |
| droplist | 下拉框的内容 | ReactNode | - | - |
| triggerProps | 弹出框下可接受所有 Trigger 组件的 Props | Partial<TriggerProps> | - | - |
| getPopupContainer | 弹出框挂在的父级节点 | (node: HTMLElement) => Element | - | - |
| onVisibleChange | 弹出框打开/关闭时会触发 | (visible: boolean) => void | - | - |
Dropdown.Button
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| defaultPopupVisible | 控制下拉框是否默认打开 | boolean | - | - |
| disabled | 是否禁用弹出 | boolean | - | 2.16.0 |
| popupVisible | 控制下拉框是否打开（受控模式） | boolean | - | - |
| unmountOnExit | 隐藏后是否销毁 DOM 结构 | boolean | true | - |
| position | 下拉框的弹出位置 | 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | br | - |
| size | 等同于 Button 的 size | 'mini' | 'small' | 'default' | 'large' | - | - |
| trigger | 触发下拉框弹出的方式 | TriggerProps['trigger'] | hover | - |
| type | 等同于 Button 的 type | 'default' | 'primary' | 'secondary' | 'dashed' | 'outline' | 'text' | default | - |
| droplist | 下拉框的内容 | ReactNode | - | - |
| icon | 右侧显示内容，可以是 icon 或者任意 dom 元素 | ReactNode | <IconMore /> | - |
| buttonProps | 接收 button 按钮的所有 Props，应用于左侧按钮 | ButtonProps | - | - |
| className | 节点类名 | string | string[] | - | - |
| style | 节点样式 | CSSProperties | - | - |
| triggerProps | 弹出框下可接受所有 Trigger 组件的 Props | Partial<TriggerProps> | - | - |
| buttonsRender | 自定义两个按钮的渲染 | (buttons: ReactNode[]) => ReactNode[] | - | - |
| getPopupContainer | 弹出框挂在的父级节点 | (node: HTMLElement) => Element | - | - |
| onClick | 左侧按钮的点击事件 | (e: Event) => void | - | - |
| onVisibleChange | 弹出框打开/关闭时会触发 | (visible: boolean) => void | - | - |