Breadcrumb

The breadcrumb component is used to show the user's current location, and provides an easy way to navigate back to previous sections. The breadcrumb displays a hierarchical navigation structure, with the current location being the last item. Each item in the breadcrumb should be a link that allows the user to navigate.

Example

<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