Neumorphism UI

Breadcrumb

用于展示当前页面在层级中的位置，并提供返回上级页面的链接。

预览

省略中间层级的路径

组合 Components、Navigation 链接、省略号和当前 Breadcrumb 页面。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/breadcrumb

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

在 BreadcrumbList 中放置 BreadcrumbItem。上级页面使用 BreadcrumbLink，当前位置使用 BreadcrumbPage，分隔符放在其后的项目内。

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";

export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbPage>Settings</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

API 参考

保留 nav 和 ol 的原生语义，并可组合链接、当前页面、分隔符和省略项。当前页面会自动设置 aria-current=page。

组件属性类型默认值说明
Breadcrumbaria-labelstring"breadcrumb"为路径导航区域提供无障碍名称。
BreadcrumbLinkhref必填string—上级路径的实际 URL。
BreadcrumbPagechildren必填React.ReactNode—当前页面名称，并自动应用 aria-current=page。
BreadcrumbSeparatorchildrenReact.ReactNode"/"对辅助技术隐藏的视觉分隔符。

无障碍

  • 01

    Breadcrumb 是带有 aria-label=breadcrumb 的 nav，路径列表使用有序列表 ol。

  • 02

    最后一项使用 BreadcrumbPage 而不是链接，以传达 aria-current=page。

  • 03

    Separator 和 Ellipsis 都是装饰元素，会对辅助技术隐藏。