Navigation Menu · Radix UI

用于网站导航的链接与子菜单集合，支持视口跟随。

安装

Radix 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 属性都保持 Radix UI 的写法。也可以按子路径单独引入：

tsx

import { NavigationMenu } from '@animate-ui/react/primitives/radix-ui';

navigation-menu.tsx

import { NavigationMenu } from '@animate-ui/react/primitives/radix-ui';

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.Item>
          <NavigationMenu.Link href="/blog">Blog</NavigationMenu.Link>
        </NavigationMenu.Item>
        <NavigationMenu.Indicator />
      </NavigationMenu.List>
      <NavigationMenu.Viewport className="h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width)" />
    </NavigationMenu.Root>
  );
}

动效

视口从顶部以 0.9 缩放淡入，220ms 柔和 ease-out，退出后卸载。
切换菜单项时视口尺寸跟随新内容，弹簧 stiffness 660 / damping 52，不跳跃、不越过目标尺寸。

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

API

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

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

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