Breadcrumb
import "@taprootio/espalier/breadcrumbs";
<esp-breadcrumb>
Represents a single breadcrumb to use in esp-breadcrumbs to show breadcrumb navigation.
Attributes
<esp-breadcrumb> has the following attributes:
label
label has a default value of "".
The label to display in the breadcrumb
url
url has a default value of "".
The url the breadcrumb points to
separator
separator has a default value of "".
Used to override the SVG separator displayed after the breadcrumb.
is-last-element
is-last-element has a default value of false.
Marks this crumb as the end of the trail. The parent
esp-breadcrumbs sets it to pick the down-arrow separator and
the current-crumb styling. It does not decide link versus label —
a crumb that carries a url stays clickable wherever it sits, so
a trail can end at its deepest folder.
CSS Properties
<esp-breadcrumb> has the following CSS properties:
--esp-breadcrumb-color
The text color of the breadcrumb link. Defaults to var(--esp-color-link), so a trail reads as navigation in the same ink as the links in the surrounding content.
--esp-breadcrumb-hover-color
The text color on hover. Defaults to var(--esp-color-link-hover).
--esp-breadcrumb-hover-background
The background behind a hovered link. Defaults to var(--esp-color-link-hover-bg).
--esp-breadcrumb-current-color
The text color of the current-page crumb, which is not a link. Defaults to --esp-breadcrumb-color when that is set, then to var(--esp-color-headings), keeping the current page distinct from the links beside it.
--esp-breadcrumb-separator-color
The color of the separator icons. Defaults to oklch(from var(--esp-color-link) l c calc(h + 90)), an accent that takes the link ink's scheme-adapted lightness and chroma at a different hue, so the arrows are their own color rather than the heading color. Set it on esp-breadcrumbs to recolor a whole trail, or on one esp-breadcrumb to recolor a single arrow.