2.20.0A navigational aid to keep track and maintain awareness of current location within a website.
Breadcrumb is part of the collection of components, visual styles, and build tools that power the the Bolt Design System.
npm install @bolt/components-breadcrumb
{% include "@bolt-components-breadcrumb/breadcrumb.twig" with {
contentItems: [
include("@bolt-components-link/link.twig", {
text: "Home",
url: "#!"
}),
include("@bolt-components-link/link.twig", {
text: "Landing Page",
url: "#!"
}),
include("@bolt-components-link/link.twig", {
text: "Sub Page",
url: "#!"
}),
include("@bolt-components-link/link.twig", {
text: "Current Page",
url: "#!",
attributes: {
"aria-current": "page",
},
}),
]
} only %}
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
| attributes | A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
| contentItems | Breadcrumb pieces. |
array
| — |
|