HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet 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.
PropTypeDescriptioncurrentbooleanDefaultfalseMarks this item as the page you are on.hrefstringThe URL the crumb links to. The current page has none.relstringDefault""The link's rel value, which describes how the linked page relates to this
one.targetstringDefault""Where the link opens. Use it for a 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.endContent after the label and outside the link, such as a switcher's menu trigger, a count, or a mark. It can hold a control, and it is not read as part of the link's accessible name.separatorReplaces the chevron shown before this item.startContent before the label, such as an icon.
EventTypeDescriptionhelix-selectHelixSelectEventA plain press on the crumb's link, with its href as the value, before the browser follows it. Cancelable: cancel it to keep the browser from following, as a client-side router does.
PartDescriptionexpandThe button after the first crumb of a folded slotted trail, which shows the folded crumbs.fold-separatorThe chevron before that button.linkThe crumb itself, which is an <a> where href is set.separatorThe separator preceding the item.separator-markThe chevron between crumbs, shown when no separator 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-current-colorText color of the current page's crumb.--breadcrumbs-font-weightWeight of every crumb's text.--breadcrumbs-hover-colorFill behind a step under the pointer.--breadcrumbs-link-colorText color of a crumb that is not the current page. A link you slot inherits it unless your own styles set a color.--breadcrumbs-radiusCorner radius of the fill behind a step under the pointer.--breadcrumbs-separator-colorColor of the chevron.
Custom stateDescriptioncurrentWhile the crumb is the current page, marked current or the last of a trail with none marked.endWhile the end slot holds something, so a stylesheet can join the label and what follows it into one control.foldedWhile a trail longer than its max-items has folded the crumb away. It takes no room.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-breadcrumbsShows the path to the current page.
PropTypeDescriptionexpandLabelstringDefault"Show {count} more"The name of the button that shows a folded trail's hidden crumbs. {count}
is how many it shows, written in the locale, and a language with plural
forms writes them: {count, plural, one {# weiteren zeigen} other {# weitere zeigen}}.itemsBreadcrumbItem[]Default[]The trail as data, drawn as crumbs before any you slot. The last item is the
current page.labelstringDefault"Breadcrumb"The landmark's name, read by screen readers. An aria-label on the host
wins over it.maxItemsnumberThe most crumbs a trail drawn from items shows before it folds its middle
into one, counting the first and the last. Unset, it never folds. At least
2, so the first crumb and the current page always show.separation"outlined"|"plain"How the two halves of a split crumb are told apart. A split crumb is one
with a control in its end slot, such as a switcher's menu trigger.
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.
PartDescriptioncrumbEach crumb drawn from items.crumb-collapsedThe crumb that holds the folded middle of a trail longer than max-items.crumb-currentThe crumb drawn from items for the current page.crumb-expandThe fold button a crumb draws after the first crumb of a folded slotted trail. A trail drawn from items draws its fold as a crumb of its own, crumb-collapsed, so this one is never drawn there.crumb-fold-separatorThe chevron before that button.crumb-linkThe link, or the current page's words, of a crumb drawn from items.crumb-separatorThe separator before a crumb drawn from items.crumb-separator-markThe chevron before a crumb drawn from items.expandThe button in the folded crumb that shows the whole trail.listThe ordered list.
CSS PropertyDescription--breadcrumbs-font-sizeSize of the trail's text.--breadcrumbs-gapSpace between items and separators.--breadcrumbs-split-divider-colorColor of the line between the two halves of a split crumb, under separation="outlined".--breadcrumbs-split-fillFill across both halves of a split crumb while one of them is under the pointer, under the default plain separation.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Breadcrumbhelix-headless-breadcrumbOne step in a breadcrumb trail.
PropTypeDescriptioncurrentbooleanDefaultfalseMarks this item as the page you are on.hrefstringThe URL the crumb links to. The current page has none.relstringDefault""The link's rel value, which describes how the linked page relates to this
one.targetstringDefault""Where the link opens. Use it for a 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, you can slot your own anchor here. Give it data-link="quiet", because a slotted anchor belongs to the outer tree and the crumb's styles cannot reach it.endContent after the label and outside the link, such as a switcher's menu trigger, a count, or a mark. It can hold a control, and it is not read as part of the link's accessible name.separatorReplaces the chevron shown before this item.startContent before the label, such as an icon.
EventTypeDescriptionhelix-selectHelixSelectEventA plain press on the crumb's link, with its href as the value, before the browser follows it. Cancelable: cancel it to keep the browser from following, as a client-side router does.
PartDescriptionexpandThe button after the first crumb of a folded slotted trail, which shows the folded crumbs.fold-separatorThe chevron before that button.linkThe crumb itself, which is an <a> where href is set.separatorThe separator preceding the item.separator-markThe chevron between crumbs, shown when no separator is slotted.
Custom stateDescriptioncurrentWhile the crumb is the current page, marked current or the last of a trail with none marked.endWhile the end slot holds something, so a stylesheet can join the label and what follows it into one control.foldedWhile a trail longer than its max-items has folded the crumb away. It takes no room.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-breadcrumbsShows the path to the current page.
PropTypeDescriptionexpandLabelstringDefault"Show {count} more"The name of the button that shows a folded trail's hidden crumbs. {count}
is how many it shows, written in the locale, and a language with plural
forms writes them: {count, plural, one {# weiteren zeigen} other {# weitere zeigen}}.itemsBreadcrumbItem[]Default[]The trail as data, drawn as crumbs before any you slot. The last item is the
current page.labelstringDefault"Breadcrumb"The landmark's name, read by screen readers. An aria-label on the host
wins over it.maxItemsnumberThe most crumbs a trail drawn from items shows before it folds its middle
into one, counting the first and the last. Unset, it never folds. At least
2, so the first crumb and the current page always show.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The trail's items, in order from the root to the current page. Put the crumb that holds the folded items where the gap should appear.
PartDescriptioncrumbEach crumb drawn from items.crumb-collapsedThe crumb that holds the folded middle of a trail longer than max-items.crumb-currentThe crumb drawn from items for the current page.crumb-expandThe fold button a crumb draws after the first crumb of a folded slotted trail. A trail drawn from items draws its fold as a crumb of its own, crumb-collapsed, so this one is never drawn there.crumb-fold-separatorThe chevron before that button.crumb-linkThe link, or the current page's words, of a crumb drawn from items.crumb-separatorThe separator before a crumb drawn from items.crumb-separator-markThe chevron before a crumb drawn from items.expandThe button in the folded crumb that shows the whole trail.listThe ordered list.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionLinksA trail of linked crumbs, with an icon on the first.OverflowA trail with its middle crumbs folded into a menu, placed where the gap is.PreviewThe path to the current page, ending with the page you are on.PreviewThe path to the current page, ending with the page you are on.SwitcherA crumb with a link and a menu. The name goes to its page, and the chevron opens a menu of its sibling pages.Switcher OutlinedA switcher crumb with a line between the link and the menu trigger, drawn at rest as well as under the pointer.