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.
Custom separators can be specified in the <esp-breadcrumb>:
Slots
<esp-breadcrumbs> has a slot:
Default
<esp-breadcrumb> items to display.
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:
--esp-breadcrumb-separator-color
Set the color of the separator. It defaults to a bright complementary color.
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--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).