Breadcrumb and way back

Examples

When to use it

Three places, one trail. Band: “← Index” on top-level pages (a.band-back), “← Index / Parent” on second-level pages (nav.crumbs). Rail: the same trail at its top (p.rail-crumbs), from 768. Phones, and tablets without a rail: the scroll-up block (see Scroll-up way back).

Live: “← Index”: Agents, Unresolved, Thoughts, Hirsla, Management README, Advisory, Bookshelf. “← Index / Parent”: the 12 articles and Hirsla Support, Privacy, Legal, What’s New, and Links. The rail trail: every page with a rail.

Anatomy

Top level

a.band-back: one link, 15/22, 1px underline 2px below (3px from 1024). An invisible ::after grows the hit area 12px up and down and 10px to each side.

Second level

nav.crumbs[aria-label=Breadcrumb] > ol > li > a > span, 15/22. The visible trail stops at the parent. The arrow sits in an aria-hidden span with two no-break spaces.

Separator

Band: “/” drawn by CSS (li + li::before, content: "/" / ""), so screen readers skip it. Rail: a real span.rail-crumbs-sep with aria-hidden="true", secondary ink.

Current page

Not shown in the trail; it is the h1. BreadcrumbList JSON-LD adds it.

Variants

Band, top level

a.band-back in header.band.

Band, second level

nav.crumbs in .band.band-sub; the band’s top padding drops to 8px on phones so the 44px targets keep its height.

Rail

p.rail-crumbs inside the rail’s nav: a paragraph, never a nested nav. Ink text, 10px gaps, underline 3px below; link colour on hover.

Bookshelf

The trail sits at the top of the filter column, on desktop only (the column is not sticky below 1024).

Miniature

Inside an Index tile every link is rewritten as a span (span.band-back), so a tile holds no nested links.

States

Hover

Lavender (#AAB4F0) on the band, link colour in the rail.

Focus

2px ring, off-white on the band.

Behaviour

Phone, tablet, desktop

Band, second level: phone 44px tap areas with 6px gaps (pulled 6px left so the text still aligns); from 768, 14px gaps and text-sized targets. Rail trail: hidden on phone; tablet at the start of the number row, after a hairline divider, with 44px targets; desktop above the section list, 28px above it.

Motion

None.

Accessibility

aria-label="Breadcrumb" on the band trail. Separators are decoration. Every way-back link is at least 44px on phones (padding on .crumbs, the ::after area on .band-back).

Words

“← Index” exactly, with two no-break spaces after the arrow. Parent names as their page titles: “Thoughts”, “Hirsla”.

Code

Classes: .crumbs .rail-crumbs .rail-crumbs-sep. Styles in site/assets/css/site.css.

<header class="band wrap">
<a class="band-back" href="/"><span aria-hidden="true">←  </span>Index</a>
<div class="band-title cols">
<div></div>
<div>
<h1 class="display">Management README</h1>
<p class="lede">A practical guide to how I think, lead, and work, so we can work well together from day one.
</p>
</div>
</div>
</header>