Menubar · Base UI

桌面应用式的常驻菜单栏，提供一组稳定可达的命令。

安装

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

终端

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

用法

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

tsx

import { Menu } from '@animate-ui/react/primitives/base-ui/menu';

menubar.tsx

import { Menu } from '@animate-ui/react/primitives/base-ui/menu';
import { Menubar } from '@animate-ui/react/primitives/base-ui/menubar';

export function EditorMenubar() {
  return (
    <Menubar>
      <Menu.Root>
        <Menu.Trigger>File</Menu.Trigger>
        <Menu.Portal>
          <Menu.Positioner sideOffset={8}>
            <Menu.Popup>
              <Menu.Item>New file</Menu.Item>
              <Menu.Item>Save</Menu.Item>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>
      <Menu.Root>
        <Menu.Trigger>Edit</Menu.Trigger>
        <Menu.Portal>
          <Menu.Positioner sideOffset={8}>
            <Menu.Popup>
              <Menu.Item>Undo</Menu.Item>
              <Menu.Item>Redo</Menu.Item>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>
    </Menubar>
  );
}

menubar.tsx

import { Menu } from '@animate-ui/react/primitives/base-ui/menu';
import { Menubar } from '@animate-ui/react/primitives/base-ui/menubar';

export function ViewMenubar() {
  return (
    <Menubar>
      <Menu.Root>
        <Menu.Trigger>View</Menu.Trigger>
        <Menu.Portal>
          <Menu.Positioner sideOffset={8}>
            <Menu.Popup>
              <Menu.CheckboxItem defaultChecked>
                <Menu.CheckboxItemIndicator animation="pop">
                  <CheckIcon />
                </Menu.CheckboxItemIndicator>
                Status bar
              </Menu.CheckboxItem>
              <Menu.Separator />
              <Menu.RadioGroup defaultValue="bottom">
                <Menu.RadioItem value="top">
                  <Menu.RadioItemIndicator animation="pop">
                    <CheckIcon />
                  </Menu.RadioItemIndicator>
                  Top
                </Menu.RadioItem>
                <Menu.RadioItem value="bottom">
                  <Menu.RadioItemIndicator animation="pop">
                    <CheckIcon />
                  </Menu.RadioItemIndicator>
                  Bottom
                </Menu.RadioItem>
              </Menu.RadioGroup>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>
    </Menubar>
  );
}

动效

打开时菜单从触发项以 0.9 缩放淡入，220ms 柔和 ease-out；切换菜单不关闭重开，而是整块移动到下一个触发项。
移动并改变尺寸使用 stiffness 660 / damping 52 的弹簧，约 155ms 走完大半、300ms 内落定；上一组菜单项向左 6px 淡出，下一组从右 6px 进入。

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

API

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

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