Breadcrumb

What it is

Only for a trail of three steps or more, above the eyebrow in the page head. 14px slate links; the current page is ink, not a link.

When to use

• A page three or more steps deep, such as Home / Scholarships / Study Abroad Scholarship.
• In the page head on a soft band, or on the award hero on navy.

When not to use

• For a two-step trail (Home / Page), keep the trail in the BreadcrumbList schema only. For a visible route up, use the Back link.
• Never put a breadcrumb and a Back link on the same page.
• To switch between sibling views, use Tabs.

Rules

• Markup: nav.hs-breadcrumb with aria-label="Breadcrumb", then ol.hs-breadcrumb__list > li.hs-breadcrumb__item. Each step is an a.hs-breadcrumb__link.
• The last item is the page itself: plain text, no link, with aria-current="page".
• Use at least three items.
• Place it first in the page head: breadcrumb, eyebrow, H1.
• CSS draws the slash. Type no separator in the markup.
• On navy, add no modifier. The trail reads the ground.

Accessibility

• The nav is a landmark named “Breadcrumb”. The ol gives the order. A screen reader reads the list, not the separators.
• aria-current="page" marks the current page.
• Contrast: links slate 6.2:1 on white, 5.9:1 on soft. On navy the links and the current page are white 86%.
• Links carry a hairline underline; hover turns the text and the underline navy (white on navy).
• Transitions stop under prefers-reduced-motion: reduce.

Variants

Breadcrumb

A two-step trail stays in the schema only.

<nav class="hs-breadcrumb" aria-label="Breadcrumb">
  <ol class="hs-breadcrumb__list">
    <li class="hs-breadcrumb__item"><a class="hs-breadcrumb__link" href="/">Home</a></li>
    <li class="hs-breadcrumb__item"><a class="hs-breadcrumb__link" href="/scholarships">Scholarships</a></li>
    <li class="hs-breadcrumb__item" aria-current="page">Graduate Student Achiever Scholarship</li>
  </ol>
</nav>

Breadcrumb on navy

No modifier: the trail reads the ground (white 86%, white 24% underline). As on the award hero.

<nav class="hs-breadcrumb" aria-label="Breadcrumb">
  <ol class="hs-breadcrumb__list">
    <li class="hs-breadcrumb__item"><a class="hs-breadcrumb__link" href="/">Home</a></li>
    <li class="hs-breadcrumb__item"><a class="hs-breadcrumb__link" href="/scholarships">Scholarships</a></li>
    <li class="hs-breadcrumb__item" aria-current="page">Study Abroad Scholarship</li>
  </ol>
</nav>
<p class="hs-eyebrow">Honor Society&reg; scholarships</p>
<p class="hs-heading hs-heading--h1">Study Abroad Scholarship</p>