breadcrumb docs

Breadcrumb

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

Published Last updated: 5.5.0 Change log Github NPM
Twig Usage 
{% set item_home %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Home',
    attributes: {
      href: '#!'
    }
  } only %}
{% endset %}
{% set item_landing %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Landing Page',
    attributes: {
      href: '#!'
    }
  } only %}
{% endset %}
{% set item_sub %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Sub Page',
    attributes: {
      href: '#!'
    }
  } only %}
{% endset %}
{% set item_current %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Current Page',
    attributes: {
      href: '#!',
      'aria-current': 'page',
    }
  } only %}
{% endset %}
{% include '@bolt-components-breadcrumb/breadcrumb.twig' with {
  items: [
    item_home,
    item_landing,
    item_sub,
    item_current,
  ]
} 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 —
  • —
items

Breadcrumb pieces.

 array —
  • [items]:
    • Type:string, object, array

      Renderable content (i.e. a string, render array, or included pattern) for a single breadcrumb
contentItems
(deprecated)

Use items instead.

 — —
  • —
Install Install 
npm install @bolt/components-breadcrumb
Dependencies @bolt/core-v3.x

breadcrumb

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

breadcrumb use case popover

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 use case band

Breadcrumb Component in a Band ^

The above example shows a xsmall band containing the breadcrumbs.

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.

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.

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.