Skip to content
LSD Framework
Component · trail

Breadcrumbs

Where you are in the orbit. Six flavours — text, chevron, icon, pill, container-collapse, and an underline that draws on landing.

01 · Simple / slash separator.lsd-crumbs
  1. Galaxy
  2. Constellation
  3. Nebula
  4. Orion
02 · Chevron separator + accent.lsd-crumbs--chev
  1. Library
  2. Components
  3. Atomics
  4. Breadcrumbs
03 · Icon + label items.lsd-crumbs__icon
  1. Home
  2. Sectors
  3. Aurora belt
04 · Pill trail.lsd-crumbs--pill
  1. Docs
  2. Guides
  3. Surfaces
  4. Tier overrides
05 · Container-collapse · resize me@container · drops middle

Drag the right edge below — middle crumbs collapse to … under 440px container width.

  1. Galaxy
  3. Constellation
  4. Nebula 7A
  5. Sector Theta
  6. Orion arm
06 · Current-page underline draw.lsd-crumbs--draw
  1. Framework
  2. Components
  3. Breadcrumbs

Click to re-run the draw animation.

View HTML — minimal markup 
<ol class="lsd-crumbs lsd-crumbs--chev">
  <li class="lsd-crumbs__item"><a class="lsd-crumbs__link" href="/">Home</a></li>
  <li class="lsd-crumbs__sep" aria-hidden="true"><span></span></li>
  <li class="lsd-crumbs__item"><a class="lsd-crumbs__link" href="/library">Library</a></li>
  <li class="lsd-crumbs__sep" aria-hidden="true"><span></span></li>
  <li class="lsd-crumbs__item"><span class="lsd-crumbs__current" aria-current="page">Breadcrumbs</span></li>
</ol>