Components · Extended

Breadcrumbs

A horizontal trail showing where the current page sits in a nested hierarchy. Not an Instagram product pattern — Instagram's app is mostly flat, tab-driven navigation — but essential for any dashboard, documentation site, or admin panel built on this system. This is the exact component powering this manual's own header, on every page.

Live

This manual's own breadcrumb trail

Not a mockup — this is the real Breadcrumbs component, rendered the same way it renders at the top of every page on this site.

Spec

Token reference

Font size

13.5px, --ig-tertiary-text default colour

Link colour

--ig-secondary-text at rest, --ig-primary-text + underline on hover

Current page

--ig-primary-text, --fw-medium — no link, aria-current="page"

Separator

16px chevron-right icon (--icon-size-sm), --ig-stroke colour

Item gap

var(--space-1) (4px) between label and separator

Trail-to-content gap

var(--space-5) (24px) margin below the trail, before the page heading

Hover transition

color var(--duration-micro) var(--ease-glide)

Wrapping

flex-wrap: wrap — long trails wrap to a second line rather than truncating or scrolling

Breadcrumbs — CSS

.breadcrumbs { margin-bottom: var(--space-5); }

.list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  font-size: 13.5px;
  color: rgb(var(--ig-tertiary-text));
}

.item { display: flex; align-items: center; gap: var(--space-1); }

.item a {
  color: rgb(var(--ig-secondary-text));
  transition: color var(--duration-micro) var(--ease-glide);
}
.item a:hover {
  color: rgb(var(--ig-primary-text));
  text-decoration: underline;
}

.item span[aria-current="page"] {
  color: rgb(var(--ig-primary-text));
  font-weight: var(--fw-medium);
}

.sep { color: rgb(var(--ig-stroke)); }

Anatomy

Three-part structure

Trail item (link)

Every crumb except the last is a real link to that level of the hierarchy — never a dead label.

Separator

A 16px chevron-right icon between every pair of items — never a slash, pipe, or other text character, for consistent icon-grammar alignment with the rest of the system.

Current page

The last item is never a link — plain text, aria-current="page", slightly heavier weight to mark it as the destination.

Do

Keep every non-final crumb a real, working link — A breadcrumb trail is navigation, not a label — every ancestor level should be one click away.
Use the 16px chevron consistently as the separator — Matches the icon-size scale and reuses the same glyph as other directional affordances in the system (see RTL & Internationalization for why chevrons mirror in RTL).
Let long trails wrap, not truncate or scroll — flex-wrap keeps every level visible and clickable — truncating a mid-trail item breaks navigation, and horizontal scroll is easy to miss.
Mark the current page with aria-current, not just a style — Screen reader users need the programmatic signal, not just the visual weight difference.

Don’t

Don't make the current page (last crumb) a link — It's already the page the user is on — a link to itself is either dead or confusing.
Don't use breadcrumbs as the only navigation — They're a wayfinding aid for hierarchy, not a replacement for primary navigation (Sidebars, Tab Bars) — use both.
Don't show a single-item trail — A breadcrumb with only the current page (no ancestors) adds noise without wayfinding value — omit the component entirely at the hierarchy's root level.