Breadcrumb

A navigational aid to keep track and maintain awareness of current location within a website.

Published

Last updated: 2.25.0

Change log

Github

NPM

Twig Usage

{% 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 %}

Schema

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`	—	[items]: Type:`string, object, array` Renderable content (i.e. a string, render array, or included pattern) for a single breadcrumb

Install

npm install @bolt/components-breadcrumb

Dependencies

@bolt/core-v3.x

Accessibility Requirement

The aria-current attribute must be applied to the last link in the set to indicate that it represents the current page.

Page sections popover

In addition to passing the Link component as an item, you may also pass the Popover component as an item, and use the Menu component in the popover to allow the user to navigate to a particular page's top sections.

Breadcrumb Component in a Band ^

The above example shows a xsmall band containing the breadcrumbs.

Eyebrow

Headline

Subheadline

Body text.

Call to Action

Breadcrumb Band Stacking On Top of Featured Band ^

The above example shows a small band containing the breadcrumbs and large band containing the content. Both have theme set to none.

Background and Theming

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

Be Future Empowered

Start with the outcomes you want.

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.

Get Smart

Breadcrumb Band Stacking On Top of Featured Band with Outer Background Band ^

The above example shows a small band containing the breadcrumbs and large band containing the content. Both have theme set to none.

Background and Theming

A background image is set on the outer band and the theme is set to dark.

Digital Transformation

Be Future Empowered

Start with the outcomes you want.

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.

Get Smart

Breadcrumb Band Stacking On Top of Featured Band (individually themed)^

The above example shows a xsmall band containing the breadcrumbs and large band containing the content.

Background and Theming

No background or theme is set on the outer band in this case because it's not neccessary.

breadcrumb

breadcrumb docs Show Code Hide Code

Breadcrumb

A navigational aid to keep track and maintain awareness of current location within a website.

breadcrumb Show Code Hide Code

breadcrumb use case popover Show Code Hide Code

breadcrumb use case band Show Code Hide Code

Breadcrumb Component in a Band ^

Headline

Subheadline

Breadcrumb Band Stacking On Top of Featured Band ^

Background and Theming

Be Future Empowered

Start with the outcomes you want.

Breadcrumb Band Stacking On Top of Featured Band with Outer Background Band ^

Background and Theming

Be Future Empowered

Start with the outcomes you want.

Breadcrumb Band Stacking On Top of Featured Band (individually themed)^

Background and Theming

breadcrumb docs

breadcrumb

breadcrumb use case popover

breadcrumb use case band