Breadcrumb

The breadcrumb component is used to show the user's current location, and provides an easy way to navigate back to previous sections.

Example

Provides hierarchical navigation showing the user's current location.

<script type="module">
  import '@blueprintui/components/include/breadcrumb.js';
  import '@blueprintui/icons/include.js';
  import '@blueprintui/icons/shapes/angle.js';
</script>
<bp-breadcrumb aria-label="breadcrumb">
  <a bp-text="link" href="#">Home</a>
  <a bp-text="link" href="#">Parent page</a>
  <p bp-text="content" aria-current="page">Current page</p>
</bp-breadcrumb>

Install

NPM

// npm package
import '@blueprintui/components/include/breadcrumb.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/breadcrumb.js/+esm';
</script>

Accessibility

• Use clear, descriptive text for each item in the breadcrumb that communicates the name of the section.
• Use appropriate color contrast to make sure the text is easily readable for users with visual impairments.
• Use aria-current attribute to indicate the current location.
• Do not prevent the default tab navigation order.

bp-breadcrumb

Properties

CSS Properties

Slots