R
导航HookSidebar虚线轨道钩形导轨Motion

钩子侧栏

虚线轨道式的纵向导航，激活项会被一段钩形导轨标记出来。

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

安装

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

npx shadcn@latest add swamimalode07/rare-ui/hook-sidebar

用法

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

hook-sidebar.tsx
import { HookSidebar } from "@/components/ui/hook-sidebar"


export function Demo() {
  return (
    <HookSidebar
      label="本章目录"
      color="#fc4c01"
      items={["概览", "快速开始", "组件列表", "常见问题"]}
    />
  )
}

属性

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

属性类型默认值说明
items(string | { label; href? })[]—导航项。
labelstring—轨道顶部的小标题。
valuenumber—受控选中索引。
defaultValuenumber0非受控默认索引。
colorstring—轨道强调色。
dashedbooleantrue轨道是否使用虚线。