Breadcrumb

标明当前页所处的位置：各级上级页面以斜体排列，彼此之间用一道短斜杠分隔，斜杠取自斜切块的斜边。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/breadcrumb

示例

省略了中间层级的路径

breadcrumb-basic.tsx

import {  Breadcrumb,  BreadcrumbEllipsis,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbList,  BreadcrumbPage,  BreadcrumbSeparator,} from "@/components/zero/breadcrumb";export default function BreadcrumbBasic() {  return (    <Breadcrumb>      <BreadcrumbList>        <BreadcrumbItem>          <BreadcrumbLink href="#board">Board</BreadcrumbLink>        </BreadcrumbItem>        <BreadcrumbSeparator />        <BreadcrumbItem>          <BreadcrumbEllipsis />        </BreadcrumbItem>        <BreadcrumbSeparator />        <BreadcrumbItem>          <BreadcrumbLink href="#east">East district</BreadcrumbLink>        </BreadcrumbItem>        <BreadcrumbSeparator />        <BreadcrumbItem>          <BreadcrumbPage>Sealed crate</BreadcrumbPage>        </BreadcrumbItem>      </BreadcrumbList>    </Breadcrumb>  );}

行为

上级页面颜色较暗，指针悬停时变亮；当前页最亮、字重最大，并标注 aria-current="page"。BreadcrumbEllipsis 代替被省略的页面。

BreadcrumbLink 默认渲染为 a 元素；可通过 render 换成路由库的链接组件。

属性

BreadcrumbLink

属性	类型	默认值	说明
render	ReactElement	—	改为渲染的元素，例如路由库的链接组件。

Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis

BreadcrumbEllipsis

属性	类型	默认值	说明
label	string	"More"	读屏软件为折叠起来的层级读出的文字。