Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Usage

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' }) }
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Custom separator & narrow width

The list wraps onto several lines instead of overflowing.

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

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SBreadcrumb

shadcn-vue Breadcrumb: the path to the current resource as a hierarchy of links.

Slots: children (trailing closure)

SBreadcrumbList

flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5. Responsive: wraps onto several lines instead of overflowing, and uses the wider gap only when the list itself has room (≥ 640vp).

Slots: children (trailing closure)

SBreadcrumbItem

inline-flex items-center gap-1.5

Slots: children (trailing closure)

SBreadcrumbLink

A navigable crumb: text-muted-foreground hover:text-foreground transition-colors. Navigate with the native .onClick() on the link.

Prop	Type	Default	Description
text	ResourceStr | undefined	undefined
icon	string | undefined	undefined	Leading lucide icon name.

Slots: children (trailing closure)

SBreadcrumbPage

The current page: text-foreground font-normal, not interactive.

Prop	Type	Default	Description
text	ResourceStr	''

SBreadcrumbSeparator

Separator between items; a 14vp chevron-right unless custom content is given.

Prop	Type	Default	Description
icon	string	'chevron-right'	Lucide icon of the separator; pass '' to show only custom slot content (e.g. a slash Text).

Slots: children (trailing closure)

SBreadcrumbEllipsis

Collapsed crumbs: flex size-9 items-center justify-center with an ellipsis icon.

Prop	Type	Default	Description
label	ResourceStr	$r('app.string.spark_more')