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