Neumorphism UI
导航与展开@neumorphism-ui/breadcrumb

Breadcrumb

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

@neumorphism-ui/breadcrumb
Registry JSON

预览

安装

安装: breadcrumbnpx shadcn@latest add @neumorphism-ui/breadcrumb

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置 。

用法

Import

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

Example

Breadcrumb 用法代码
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">首页</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">组件</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>面包屑导航</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API 参考

组件属性类型默认值说明
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 都是装饰元素，会对辅助技术隐藏。