UI
本页目录

组件 · 导航

Breadcrumb 面包屑

层级导航面包屑。

入口 @selrux/ui/breadcrumb · 源码 src/components/breadcrumb/index.ts · 7 个组件 · 发布状态 preview

使用建议

  • 避免：把面包屑当主导航菜单
  • 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  // …共 7 个导出
} from '@selrux/ui/breadcrumb';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

代码演示

基础用法

最后一项用 BreadcrumbPage 表示当前页。

省略层级

层级较深时用 BreadcrumbEllipsis 折叠中间项。

尺寸

size 六档。

API

属性覆盖：示例用到 1 / 1 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

Breadcrumb

属性说明类型默认值
size-"xs" | "sm" | "md" | "lg" | "xl" | "2xl"-

另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。

BreadcrumbEllipsis

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

BreadcrumbItem

无自有属性；其余 281 项原生属性继承自 HTMLAttributes / LiHTMLAttributes。

无自有属性；其余 288 项原生属性继承自 AnchorHTMLAttributes / HTMLAttributes。

BreadcrumbList

无自有属性；其余 283 项原生属性继承自 HTMLAttributes / OlHTMLAttributes。

BreadcrumbPage

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

BreadcrumbSeparator

无自有属性；其余 281 项原生属性继承自 HTMLAttributes / LiHTMLAttributes。

导出类型：BreadcrumbEllipsisProps、BreadcrumbItemProps、BreadcrumbLinkProps、BreadcrumbListProps、BreadcrumbPageProps、BreadcrumbProps、BreadcrumbSeparatorProps、BreadcrumbSize