HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
BreadcrumbsView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorShows the path to the current page.StableSince 0.1.0NavigationUsageimport'@fusion.dev/helix/breadcrumbs'import'@fusion.dev/helix-headless/breadcrumbs'Preview
API ReferenceBreadcrumbhelix-breadcrumbOne step in a breadcrumb trail.
PropTypeDefaultDescriptioncurrentbooleanfalseWhether this item is the page the reader is on.hrefstringWhere the crumb goes, and nothing where it is the current page.relstring""What the link declares about where it goes.targetstring""Where the link opens, for the rare crumb that leaves the site.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The step: a link, or the text of the current page.endAfter it, for a count or a mark.separatorReplaces the chevron shown before this item.startBefore the label, for an icon.
PartDescriptionlinkThe crumb itself, which is an `<a>` where `href` is set.separatorThe separator preceding the item.separator-markThe glyph between this crumb and the next, where none is slotted.
CSS PropertyDescription--breadcrumbs-control-padding-inlineInline padding of a control slotted into a crumb, matching the steps either side of it.--breadcrumbs-control-sizeHow tall a control slotted into a crumb is.--breadcrumbs-hover-colorFill behind a step under the pointer.--breadcrumbs-separator-colorColor of the chevron.
Roothelix-breadcrumbsShows the path to the current page.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The trail's items, in order from root to current page.
PartDescriptionlistThe ordered list.
CSS PropertyDescription--breadcrumbs-gapSpace between items and separators.
Breadcrumbhelix-headless-breadcrumbOne step in a breadcrumb trail.
PropTypeDefaultDescriptioncurrentbooleanfalseWhether this item is the page the reader is on.hrefstringWhere the crumb goes, and nothing where it is the current page.relstring""What the link declares about where it goes.targetstring""Where the link opens, for the rare crumb that leaves the site.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The step's label. Without an `href` this may be the consumer's own anchor, styled with `data-link="quiet"`, since a slotted anchor belongs to the outer tree and cannot be reached from this component's styles.endAfter it, for a count or a mark.separatorReplaces the chevron shown before this item.startBefore the label, for an icon.
PartDescriptionlinkThe crumb itself, which is an `<a>` where `href` is set.separatorThe separator preceding the item.separator-markThe glyph between this crumb and the next, where none is slotted.
Roothelix-headless-breadcrumbsShows the path to the current page.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The trail's items, in order from root to current page, with the crumb holding the fold wherever the gap should appear.
PartDescriptionlistThe ordered list.
ExamplesNameDescriptionLinksA trail whose crumbs are the links, with an icon on the first.OverflowA trail whose middle is folded into a menu, written where the gap is.PreviewThe path to the current page, the last crumb being where the reader is.PreviewThe path to the current page, the last crumb being where the reader is.SwitcherA crumb that opens a menu, for switching what the trail is about.