Breadcrumb 面包屑

用层级链接显示当前资源的路径。

基础用法

SBreadcrumb() {
  SBreadcrumbList() {
    SBreadcrumbItem() { SBreadcrumbLink({ text: 'Home' }).onClick(() => this.go('home')) }
    SBreadcrumbSeparator()
    SBreadcrumbItem() { SBreadcrumbEllipsis() }
    SBreadcrumbSeparator()
    SBreadcrumbItem() { SBreadcrumbLink({ text: 'Components' }).onClick(() => this.go('components')) }
    SBreadcrumbSeparator()
    SBreadcrumbItem() { SBreadcrumbPage({ text: 'Breadcrumb' }) }
  }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

自定义分隔符与窄宽度

列表会换行显示，而不是溢出。

// custom separator: icon '' + slot content
SBreadcrumbSeparator({ icon: '' }) { Text('/') }
SBreadcrumbSeparator({ icon: 'slash' })
// wraps instead of overflowing when narrow
Column() { SBreadcrumb() { ... } }.constraintSize({ maxWidth: 220 })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SBreadcrumb

shadcn-vue 的 Breadcrumb：以链接的层级形式展示通往当前资源的路径。

插槽: 子组件（尾随闭包）

SBreadcrumbList

flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5。响应式：超出宽度时会换行到多行，而不是溢出；只有列表本身有足够空间（≥ 640vp）时才使用较宽的间距。

插槽: 子组件（尾随闭包）

SBreadcrumbItem

inline-flex items-center gap-1.5

插槽: 子组件（尾随闭包）

SBreadcrumbLink

可导航的面包屑项：text-muted-foreground hover:text-foreground transition-colors。通过链接上原生的 .onClick() 进行导航。

属性	类型	默认值	说明
text	ResourceStr | undefined	undefined
icon	string | undefined	undefined	前导 lucide 图标名称。

插槽: 子组件（尾随闭包）

SBreadcrumbPage

当前页：text-foreground font-normal，不可交互。

属性	类型	默认值	说明
text	ResourceStr	''

SBreadcrumbSeparator

项目之间的分隔符；除非提供自定义内容，否则为 14vp 的右箭头。

属性	类型	默认值	说明
icon	string	'chevron-right'	分隔符的 lucide 图标；传入 '' 则只显示自定义插槽内容（例如斜杠文本）。

插槽: 子组件（尾随闭包）

SBreadcrumbEllipsis

折叠的面包屑项：flex size-9 items-center justify-center，显示省略号图标。

属性	类型	默认值	说明
label	ResourceStr	$r('app.string.spark_more')