组件

OneBreadcrumb

第一个 current 项作为当前位置；没有显式 current 时使用最后一项。非当前位置的 href 使用原生链接。

查看代码收起代码

import { OneBreadcrumb } from '@geektech/one';

new OneBreadcrumb({
  maxItems: 3,
  items: [
    { label: '首页', href: '/' },
    { label: '项目', href: '/projects' },
    { label: '详情', current: true },
  ],
});

折叠与分隔符

maxItems 保留首项、当前位置和末项，省略按钮可展开全部路径。separator 插槽优先于 separator 文本。

键盘与 ARIA

外层 nav 使用 aria-label，当前位置使用 aria-current=page；链接和展开按钮均保留原生 Tab、Enter 与 Space 行为。

API

OneBreadcrumbProps
名称	签名	说明
`items`	`items: readonly OneBreadcrumbItem[]`	按来源顺序显示的层级项目。
`separator`	`separator?: string`	文本分隔符，默认 /。
`maxItems`	`maxItems?: number`	折叠前最多保留的项目数，最小为 3。
`ariaLabel`	`ariaLabel?: string`	导航的可访问名称，默认“面包屑”。
`children`	`children?: Array<VNode \| string>`	可提供 separator 命名插槽。

OneBreadcrumbItem 与事件
名称	签名	说明
`OneBreadcrumbItem`	`{ label: string; href?: string; current?: boolean }`	层级项目公开类型。
`itemClick`	`(event: OneBreadcrumbClickEvent) => void`	在原生导航前发出 item、index 和 originalEvent；可调用 preventDefault。