# Breadcrumb
> Shows a trail of three or more steps above the eyebrow in the page head.
- Block class: `.hs-breadcrumb`
- CSS: `components/breadcrumb.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2b.html
- Variants: Breadcrumb, Breadcrumb on navy
- HTML page: https://brand.honorsociety.org/components/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](/components/back-link/).
- Never put a breadcrumb and a [Back link](/components/back-link/) on the same page.
- To switch between sibling views, use [Tabs](/components/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.
```html
```
### Breadcrumb on navy
No modifier: the trail reads the ground (white 86%, white 24% underline). As on the award hero.
```html