Dropdown Menu · React Aria

由按钮触发的操作或选项列表，支持键盘导航。

安装

React Aria 的原语保持上游 API 不变，安装只需要三步：加包、加组件、把 import 换掉。

终端

bun add @animate-ui/react motion
bunx shadcn@latest add dropdown-menu
bunx @animate-ui/cli@latest animate dropdown-menu

用法

从 Animate UI 引入原语，其余结构、属性与 data 属性都保持 React Aria 的写法。也可以按子路径单独引入：

tsx

import {
  Button,
  Menu,
  MenuItem,
  MenuTrigger,
  Popover,
} from '@animate-ui/react/primitives/react-aria';

dropdown-menu.tsx

import {
  Button,
  Menu,
  MenuItem,
  MenuTrigger,
  Popover,
} from '@animate-ui/react/primitives/react-aria';

export function AccountMenu() {
  return (
    <MenuTrigger>
      <Button>Account</Button>
      <Popover placement="bottom start" offset={4}>
        <Menu>
          <MenuItem>Profile</MenuItem>
          <MenuItem>Billing</MenuItem>
          <MenuItem>Log out</MenuItem>
        </Menu>
      </Popover>
    </MenuTrigger>
  );
}

dropdown-menu.tsx

import {
  Button,
  Menu,
  MenuItem,
  MenuSection,
  MenuTrigger,
  Popover,
  SelectionIndicator,
} from '@animate-ui/react/primitives/react-aria';

export function ViewMenu() {
  return (
    <MenuTrigger>
      <Button>View</Button>
      <Popover placement="bottom start" offset={4}>
        <Menu>
          <MenuSection
            selectionMode="multiple"
            defaultSelectedKeys={['status-bar']}
          >
            <MenuItem id="status-bar">
              <SelectionIndicator animation="pop">
                <CheckIcon />
              </SelectionIndicator>
              Status bar
            </MenuItem>
          </MenuSection>
          <MenuSection selectionMode="single" defaultSelectedKeys={['bottom']}>
            <MenuItem id="top">
              <SelectionIndicator animation="pop">
                <CheckIcon />
              </SelectionIndicator>
              Top
            </MenuItem>
            <MenuItem id="bottom">
              <SelectionIndicator animation="pop">
                <CheckIcon />
              </SelectionIndicator>
              Bottom
            </MenuItem>
          </MenuSection>
        </Menu>
      </Popover>
    </MenuTrigger>
  );
}

动效

菜单从触发元素的锚点以 0.9 缩放淡入，220ms，关闭同路返回后卸载。
子菜单从触发项的一侧以同样方式生长；快速开关从当前位置接续。

所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。

API

动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 与 React Aria 完全一致。

这一页没有额外的动画属性，API 与 React Aria 相同。

内容对应官方文档 2026-10-18 版本。