Breadcrumbs

Breadcrumbs reveal where someone sits inside a hierarchy and how to get back. They turn deep navigation into a short sentence—Home › Products › Daypacks—so people can trace their steps without reopening menus or guessing at parent pages.

Use breadcrumbs when the information architecture is at least three levels deep or when search often lands visitors mid-flow. Keep labels concise, make the trail keyboard-navigable, and let the final crumb read-only so it quietly anchors the current view.

Regular breadcrumbs are the default inline trail: an ordered list of links that lets readers jump to any ancestor. Use plain text for the current page, avoid truncating the hierarchy unless space is tight, and respect logical ordering from broad to specific so scanning mirrors the site map.

<ol class="breadcrumbs">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Knob breadcrumbs swap the classic chevrons for pill-shaped links, making each level feel tappable and distinct. They shine in touch-heavy layouts or when breadcrumbs double as quick filters. Keep spacing generous, and reserve the final knob as static text to reinforce the current location.

Knob styling shares tokens with knob links; see Links › Knobs for color and state guidance so breadcrumb pills match the rest of your navigation controls.

<ol class="breadcrumbs knobs">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Step breadcrumbs guide users through sequenced flows—checkout, onboarding, booking—where the path is linear and progress matters. Each step doubles as a label and status indicator; only completed steps should be links, the current step should be visually active, and future steps should remain reachable only after validation.

Keep copy short (one title plus a subline), align steps to the process order, and ensure focus states are visible so keyboard users can review completed steps without losing their place.

<ul class="breadcrumbs steps">
  <li>
    <a href="...">...</a>
  </li>
  <li class="active">
    <span>...</span>
  </li>
  <li>
    <a href="...">...</a>
  </li>
</ul>

Icon steps layer symbols above the labels to reinforce meaning (shipping, billing, confirmation). Choose icons that communicate state at a glance, and keep sizing consistent so the rhythm of the trail remains even.

<ul class="breadcrumbs steps icons">
  <li>
    <a href="...">
      <svg class="icon">...</svg>
      ...
    </a>
  </li>
  <li class="active">
    <span>
      <svg class="icon">...</svg>
      ...
    </span>
  </li>
  <li>
    <a href="...">
      <svg class="icon">...</svg>
      ...
    </a>
  </li>
</ul>

Vertical steps fit sidebars and narrow viewports where horizontal space is limited. Use them for wizard-style flows or dashboards that keep process navigation pinned while the main content changes. Maintain clear active styling and ample spacing so touch targets stay comfortable.

<ul class="breadcrumbs steps vertical">...</ul>