Breadcrumbs — Collapsing Trail HTML CSS JS Snippet

Breadcrumbs show a user where they are in a site's hierarchy and let them jump back up to any ancestor level in one click — standard on any site with nested categories, file paths, or multi-step settings. This snippet covers both the simple three-level case and the harder problem: what happens when the path is eight levels deep and doesn't fit on one line.

Semantic structure

The trail is a <nav aria-label="Breadcrumb"> wrapping an <ol> — an ordered list, not an unordered one, because a breadcrumb path has a meaningful sequence. Every visited ancestor is a real <a href="...">, and only the final, current segment is a plain <span> with aria-current="page" — marking the current location as non-interactive is correct because linking a page to itself serves no purpose and aria-current tells assistive technology which segment represents "here" without needing to infer it from position.

Separators as siblings, not pseudo-elements

Each / separator is a real <span class="sep"> element placed before its link, rather than a ::before CSS pseudo-element. This is a deliberate accessibility choice: CSS-generated content is inconsistently exposed to screen readers across browsers, so a visible, real DOM separator guarantees consistent behavior, at the minor cost of one extra element per crumb.

The collapsing problem

A breadcrumb trail with eight segments doesn't fit in a typical sidebar or mobile viewport width. This snippet's renderLong() checks window.innerWidth < 480 && LONG_PATH.length > 4 and, when both are true, renders only the first segment, a … button standing in for the hidden middle, and the last two segments — the same convention Windows Explorer and macOS Finder's breadcrumb bars use. The first segment stays because it anchors the user to the top of the hierarchy; the last two stay because they show exactly where the user currently is and the level directly above it.

The collapse button is interactive, not decorative

The … is a real <button>, not static text, with aria-label="Show hidden path segments" — clicking it calls expandCrumbs(), which re-renders the full uncollapsed list. A common mistake is rendering the ellipsis as plain text, which discards the ability to ever see the hidden segments; making it a button preserves full navigability while still solving the width problem.

Recalculating on resize

window.addEventListener('resize', renderLong) means resizing the browser (or rotating a device) re-evaluates the collapse condition and re-renders — a trail collapsed on a narrow mobile viewport automatically expands back to full when the window widens past the 480px threshold, without requiring a page reload.

Building the HTML string safely

crumbHtml() is the single function responsible for rendering one segment, called identically whether building the collapsed or expanded view — this avoids duplicating the link-vs-current-span branching logic in two places, which is a common source of the two views silently drifting apart from each other over time.

Truncating long individual labels

This snippet handles too many *segments*; a segment with a very long individual label (a long file name, for instance) is a separate problem, best solved with text-overflow: ellipsis and a max-width on that specific <a> or <span>, combined with a native title attribute so the full text is still available on hover.

React integration

In React, pass the path as an array of { label, href } objects, derive the collapsed/expanded view with a small useMemo keyed on a window.innerWidth value tracked via a resize listener in useEffect, and render the last item as a <span aria-current="page"> exactly as this snippet does.

See also the breadcrumb dropdown for a variant where each segment itself opens a dropdown of sibling pages, and the table of contents snippet for a different kind of "where am I" navigation aid.