Skip to content

CSS Showcase · Live Demo

Breadcrumbs that never break.

Trail patterns from full chevron and slash separators to collapsed overflow trails, plus mobile-friendly back-links and scrollable trails.

Featured demo

mobile · back-link

mobile design patterns

breadcrumb-back-link.css
/* Mobile single back-link breadcrumb */
.crumb-back {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--primary);
  font-weight: 500;
}

.crumb-current {
  display: block;
  margin-top: 0.35rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

CSS features used

  • • flexbox wrap trails
  • • text-overflow: ellipsis
  • • scroll-snap-type
  • • mask-image fade edges
  • • aria-current styling
  • • Semantic tokens

CSS Showcase · Share

Share this demo as a 1:1 image

A 2048×2048 PNG with the live current view, the title, and the CSS features — for social posts, docs, and READMEs.

The snapshot follows the device selected on the page — switch between desktop, iPad, and mobile above and the card updates.