Navigation Menu · Base UI

网站导航用的链接与子菜单集合。

安装

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

终端

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

用法

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

tsx

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

navigation-menu.tsx

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

export function SiteNav() {
  return (
    <NavigationMenu.Root>
      <NavigationMenu.List>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger>Learn</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <NavigationMenu.Link href="/docs">
              Documentation
            </NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
      </NavigationMenu.List>
      <NavigationMenu.Portal>
        <NavigationMenu.Positioner sideOffset={8}>
          <NavigationMenu.Popup className="h-(--popup-height) w-(--popup-width)">
            <NavigationMenu.Viewport />
          </NavigationMenu.Popup>
        </NavigationMenu.Positioner>
      </NavigationMenu.Portal>
    </NavigationMenu.Root>
  );
}

动效

弹层从触发项以 0.9 缩放淡入，220ms 柔和 ease-out，退出播完后卸载。
在菜单项之间移动时，弹层与尺寸跟随新内容，弹簧 stiffness 660 / damping 52，不越过目标尺寸。

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

API

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

属性	类型	默认值
transition	`Transition`	`{ duration: 0.22, ease: [0.215, 0.61, 0.355, 1] } (the move and resizing: { type: 'spring', stiffness: 660, damping: 52 })`
exitTransition	`Transition`	`transition`

未列出的属性与上游 API 完全一致，可在官方文档查阅。