On this page Breadcrumb Breadcrumb

The m3e-breadcrumb and m3e-breadcrumb-item components work together to display a hierarchical navigation trail. 

import "@m3e/web/breadcrumb";
 Usage

This section outlines usage examples and configuration guidance for the components in this package.

Anatomy

To create a breadcrumb trail, place your items inside an m3e-breadcrumb element. Each m3e-breadcrumb-item represents one level in the navigation hierarchy, starting with the broadest level and ending with the most specific. The final item is treated as the current level automatically, while the earlier items describe the path that leads to it.

Dashboard Reports Annual 
<m3e-breadcrumb>
  <m3e-breadcrumb-item>Dashboard</m3e-breadcrumb-item>
  <m3e-breadcrumb-item>Reports</m3e-breadcrumb-item>
  <m3e-breadcrumb-item>Annual</m3e-breadcrumb-item>
</m3e-breadcrumb>
 Links

Breadcrumb items can also behave like links by specifying a URL using the href attribute. You can also specify target, and rel similar to native anchor tags. Links are not supported for the last item in a breadcrumb because the current level is not interactive.

Web API Web Components 
<m3e-breadcrumb>
  <m3e-breadcrumb-item href="https://developer.mozilla.org/en-US/docs/Web" target="_blank">Web</m3e-breadcrumb-item>
  <!-- Additional items omitted for brevity -->
</m3e-breadcrumb>
Icons

Use the icon slot to render an icon before the label of an item. For icon-only items, simply place an icon in the default slot. Use item-label to provide an accessible label to the inner button of an icon-only item.

When using m3e-icon, the icon in the current breadcrumb item will automatically be filled.

Reports Annual 
<m3e-breadcrumb>
  <m3e-breadcrumb-item item-label="Dashboard">
    <m3e-icon name="dashboard"></m3e-icon>
  </m3e-breadcrumb-item>
  <m3e-breadcrumb-item>
    <m3e-icon slot="icon" name="analytics"></m3e-icon>Reports
  </m3e-breadcrumb-item>
  <m3e-breadcrumb-item>
    <m3e-icon slot="icon" name="calendar_month"></m3e-icon>Annual
  </m3e-breadcrumb-item>
</m3e-breadcrumb>
 Custom separators

Use the separator slot to provide a custom visual separator. The slotted element is cloned into each item's shadow root, replacing the default separator.

/ Dashboard Reports Annual 
<m3e-breadcrumb>
  <span slot="separator">/</span>
  <m3e-breadcrumb-item>Dashboard</m3e-breadcrumb-item>
  <!-- Additional items omitted for brevity -->
</m3e-breadcrumb>
 Wrapping

Breadcrumbs do not wrap by default. When horizontal space is limited, the last item is truncated with an ellipsis. Use the wrap attribute if you want the breadcrumb to wrap lines instead.

Lorem ipsum dolor sit amet Consectetur adipiscing elit sed do Tempor incididunt ut labore et dolore Magna aliqua ut enim ad minim veniam Quis nostrud exercitation ullamco laboris nisi ut aliquip 
<m3e-breadcrumb wrap>
  <!-- Items omitted for brevity -->
</m3e-breadcrumb>
 Accessibility

Breadcrumbs are given ARIA role="navigation", indicating that the component represents a navigational landmark. Internally, breadcrumbs organize items within a list, with each item exposed using ARIA role="listitem" to identify it as a step in the breadcrumb trail for assistive technologies. Each breadcrumb item encapsulates its slotted content in either an element with role="button" or role="link", with the role chosen based on whether an href attribute is set.

Separators have aria-hidden="true" to ensure they are always hidden from assistive technologies.

When disabled, a breadcrumb item applies aria-disabled="true" to the internal button or link to convey to assistive technologies that the item is present but not actionable.

When current is set, the item becomes non-interactive and exposes only role="listitem". No internal button or link is rendered, and no interactive role is applied. The component reflects the value of current to aria-current on the internal wrapper element that contains the slotted content. If no current value is explicitly provided, the last breadcrumb item automatically receives aria-current="page" to indicate the user's current position. The current attribute accepts the same values as the ARIA aria-current attribute, including page, step, location, date, time, and true.

For icon-only items, use the item-label attribute to provide an accessible name for the item's internal button or link.

Native module support

The @m3e/web package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following. 

<script type="module" src="/node_modules/@m3e/web/dist/breadcrumb.js"></script>

In addition, you must use an import map to include additional dependencies. 

<script type="importmap">
  {
    "imports": {
      "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.8.1/+esm",
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.0/",
      "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/+esm",
      "lit-html/directive.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directive.js",
      "lit-html/directives/if-defined.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/if-defined.js",
      "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/+esm",
      "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/",
      "@m3e/web/core": "/node_modules/@m3e/web/dist/core.js"
    }
  }
</script>

For production builds, use the minified files to ensure optimal load performance.

API

The @m3e/web package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.