breadcrumb docs

2.11.2

Breadcrumb

Breadcrumb Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-breadcrumb
Source code
View on Github
Dependencies

Overview

Stylistic pull quote styles for all types of layout. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-breadcrumb

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: "#!"
    }),
    "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 —

breadcrumb

breadcrumb current page aria variation

breadcrumb band variation

Breadcrumb Component in a Band ^

The above example shows a xsmall band containing the breadcrumbs.

Eyebrow

Headline

Subheadline

Body text.

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.

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.

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.