2.20.0
A 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
| — |
|
The above example shows a xsmall band containing the breadcrumbs.
Eyebrow
Body text.
The above example shows a small band containing the breadcrumbs and large band containing the content. Both have theme set to none.
There is an outer band containing the breadcrumb band and the featured band, background and theme should be set on that outer band.
Digital Transformation
Digital transformation is more than a slick new mobile app. It demands the hard work of designing for customer outcomes. Pega software gives you the power to truly transform.
The above example shows a small band containing the breadcrumbs and large band containing the content. Both have theme set to none.
A background image is set on the outer band and the theme is set to dark.
Digital Transformation
Digital transformation is more than a slick new mobile app. It demands the hard work of designing for customer outcomes. Pega software gives you the power to truly transform.
The above example shows a xsmall band containing the breadcrumbs and large band containing the content.
No background or theme is set on the outer band in this case because it's not neccessary.