Breadcrumbs

import "@taprootio/espalier/breadcrumbs";

<esp-breadcrumbs>

Used to display breadcrumb navigation. By default, the breadcrumbs will be separated by right-arrows, with the final item having a down-arrow after it. esp-breadcrumb instances should be placed in the default slot to build out the navigation.

Every crumb with a url is a link, including the last one — a trail may end at the deepest folder rather than at the current page. Leave url off a crumb to render it as the italic current-page label:

Custom separators can be specified in the <esp-breadcrumb>:

Slots

<esp-breadcrumbs> has a slot:

Default

<esp-breadcrumb> items to display.

Attributes

<esp-breadcrumbs> has the following attributes:

surface-layer

surface-layer has a default value of undefined.

Declares the painted surface depth. Fields use the next local layer, capped at layer 4.

intent

intent has a default value of undefined.

The element's intent — its meaning: neutral (no pin), or success, warning, danger, info — each pinned to its fixed status family (blue for info), retunable per theme via intents. On token-emitting controls a non-neutral intent pins the filled-action pair to that family, derived over the governing zone's theme; class-styled chrome (badges, callouts, status pills) opts out of inline emission and renders its treatment from CSS classes instead. An intent never repaints the surrounding zone, which is what contexts are for. Removing the attribute restores the element's own default intent.

context

context has a default value of undefined.

A theme-defined color zone. The selected context rebinds designer-facing roles and emits a complete, contrast-enforced semantic token table on this host for descendants to inherit.

Methods

<esp-breadcrumbs> has the following methods:

traverseToClosest

Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.

CSS Properties

<esp-breadcrumbs> has the following CSS properties:

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.

--esp-field-background

Background color of the shared field shell. Defaults to one layer above the nearest declared surface, capped at var(--esp-color-layer-4), or var(--esp-color-layer-2) without a declared surface. An explicit override wins.

--esp-field-border-color

Border color of the shared field shell. Defaults to var(--esp-color-border).

--esp-field-border-width

Border width of the shared field shell. Defaults to 1px.

--esp-field-text-color

Text color used inside the shared field shell. Defaults to var(--esp-color-text).

--esp-field-hover-bg

Hover background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-bg

Focus background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-shadow

Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).