Breadcrumb navigation in HTML

A breadcrumb trail is an ordered list inside a labeled nav.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/tours">Tours</a></li>
    <li><a href="/tours/sql">SQL</a></li>
    <li aria-current="page">Joins &amp; aggregation</li>
  </ol>
</nav>

How it works

The aria-label distinguishes it from other navigation.
aria-current=page marks where the reader is now.
The last crumb is text, not a link to itself.

The run, in numbers

Lines: 8
Characters to type: 204
Tokens: 84
Three-star pace: 70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 72 seconds.

Type this snippet

Step 4 of 7 in Page landmarks, step 4 of 23 in Semantics & metadata.

← Previous Next →