Breadcrumb

When to use it

• On any page below the top level: an article, a state page, a price page, a seat.
• Keep it short. Two or three levels, ending on the current page.

• Do not show the reader's path through the site. It shows where the page is, not how they got here.
• Do not make the last item a link. It is the page they are on.

<nav class="p234-breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">World</a></li>
    <li><span aria-current="page">Canada work permits</span></li>
  </ol>
</nav>

<nav class="p234-breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Cost of living</a></li>
    <li><a href="#">Petrol</a></li>
    <li><span aria-current="page">Lagos</span></li>
  </ol>
</nav>

Why it matters more here than usual

Almost every reader arrives on an article from search, never having seen the homepage. The breadcrumb is the first thing that tells them what site they are on and what else is here. It is navigation for people who did not come through the front door.

Accessibility

• Wrap it in <nav aria-label="Breadcrumb"> and use an ordered list. The order is the meaning.
• Mark the final item aria-current="page".
• Let the separator come from CSS, so a screen reader reads the trail and not a row of slashes.

The visible trail and the BreadcrumbList JSON-LD should describe the same path. They are generated separately today, which is how they drift.