bread-crumb

Hierarchical navigation trail. Wraps existing

markup HTML-first, or auto-generates from window.location.pathname. Emits BreadcrumbList JSON-LD for SEO.

Overview

The <bread-crumb> component formalizes the existing <nav class="breadcrumb"> pattern used across VB documentation and snippet pages. It accepts plain <ol> markup as the HTML-first source of truth, applies role="navigation" and aria-label="Breadcrumb", ensures aria-current="page" on the final crumb, and emits a BreadcrumbList JSON-LD <script> for SEO. With data-from-pathname, it can also auto-generate the trail from window.location.pathname.

Attributes

Attribute	Type	Default	Description
data-from-pathname	boolean	—	Auto-build the trail from window.location.pathname. Each segment becomes a crumb (Title-Cased fallback).
data-current-label	string	—	Label override for the final (current page) crumb when auto-generating.
data-separator	string	chevron	Separator glyph: chevron, arrow, dot, or pipe.
data-collapsed	boolean	—	Hide middle items, showing only first and last with an ellipsis between.
data-jsonld	string	on	BreadcrumbList JSON-LD emission. Set to off to skip.

Child attributes

Attribute	On	Description
data-truncated	<li>	Truncate a long label with an ellipsis (max-width 10rem).

Usage

HTML-first

Wrap an ordered list of links. The last item is treated as the current page:

<bread-crumb> <ol> <li><a href="/docs/">Docs</a></li> <li><a href="/docs/elements/">Elements</a></li> <li><span aria-current="page">Bread Crumb</span></li> </ol> </bread-crumb>

Auto from pathname

Skip the markup and let the component infer the trail. Provide data-current-label for a friendly final-crumb label:

<bread-crumb data-from-pathname data-current-label="My Page"></bread-crumb>

Override segment labels

For non-trivial slugs, assign a label map via the .labels property:

<bread-crumb id="bc" data-from-pathname></bread-crumb> <script> document.getElementById('bc').labels = { '/docs/': 'Documentation', 'web-components': 'Web Components', }; </script>

Progressive Enhancement

1. HTML. The <ol><li> structure is the semantic anchor. Without JS or CSS, the trail is a navigable list of links.
2. CSS. VB's bread-crumb styles apply token-driven separators, hover states, and theme-aware colors via the element selector — no class needed.
3. JS. The component applies missing ARIA attributes, ensures aria-current="page" on the last crumb, supports auto-generation, and emits BreadcrumbList JSON-LD.

Accessibility

• The host element gets role="navigation" and aria-label="Breadcrumb" automatically. Override either by setting your own.
• The final crumb is announced as the current page via aria-current="page", applied to either an <a> or <span>.
• Use data-truncated sparingly: while ellipsized text is announced in full by screen readers, ensure the underlying label is still meaningful out of context.

SEO

By default the component appends a <script type="application/ld+json"> child containing a BreadcrumbList object derived from the rendered trail. Set data-jsonld="off" when the document already exposes breadcrumbs through another mechanism.