R
导航GooeyNav粘性形变SVG 路径Motion

粘性导航

选中的那一项会从整条导航里「分离」出来，中间由一条收窄的粘性颈部连接。

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/gooey-nav.tsx。

npx shadcn@latest add swamimalode07/rare-ui/gooey-nav

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

gooey-nav.tsx
import { GooeyNav } from "@/components/ui/gooey-nav"


export function Demo() {
  return (
    <GooeyNav
      items={["总览", "组件", "文档", "定价"]}
      defaultValue={0}
      activeColor="#fc4c01"
      size="md"
    />
  )
}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
items(string | { label, href?, icon? })[]—导航项。
valuenumber—受控选中项。
defaultValuenumber0非受控默认选中项。
onChange(index: number) => void—选中变化回调。
size"sm" | "md" | "lg""md"整体尺寸。
activeColorstring—选中项填充色。
separationnumber—分离间距。
radiusnumber—圆角半径。