MICA / BREADCRUMBS

A little context.

Quiet links through the page hierarchy. Plain text for where you are. No backgrounds or borders around individual crumbs.

Design brief

A shared direction for the next version of our website.

Website refreshUpdated todayAlex Morgan

The page title carries the emphasis. Breadcrumbs stay small and unobtrusive above it.

Full trail

Wrap naturally when space gets tight. Every ancestor stays visible.

Collapsed ancestors

An explicit option for deeper paths. Keep the parent and current page visible.

Try the ancestor menu, narrow preview, or keyboard navigation.

Current mica controls

Markup anatomy

<nav data-breadcrumbs aria-label="Breadcrumb">
  <ol>
    <li><a href="/projects">Projects</a></li>
    <li><span aria-current="page">Website refresh</span></li>
  </ol>
</nav>

Separators are decorative CSS. The full trail needs no JavaScript. The optional ancestor disclosure uses native details; the optional module adds Escape and outside-click dismissal. Nothing automatically hides destinations.