Breadcrumbs

Where this page sits. The last crumb is the current page and is not a link.

Preview

Code

The three render the same class names, the same ARIA and the same data attributes. That is checked when this site builds: a class in any of these samples that neither the markup contract nor the shipped stylesheet defines fails the build.

<nav class="wsu-breadcrumbs" aria-label="Breadcrumb">
  <ol class="wsu-breadcrumbs__list">
    <li class="wsu-breadcrumbs__item">
      <a class="wsu-breadcrumbs__link" href="/">Home</a>
      <svg class="wsu-icon wsu-breadcrumbs__separator" aria-hidden="true"><use href="/assets/wayne-ui/icons.svg#wsu-chevron-right"/></svg>
    </li>
    <li class="wsu-breadcrumbs__item">
      <a class="wsu-breadcrumbs__link" href="/registration">Registration</a>
      <svg class="wsu-icon wsu-breadcrumbs__separator" aria-hidden="true"><use href="/assets/wayne-ui/icons.svg#wsu-chevron-right"/></svg>
    </li>
    <li class="wsu-breadcrumbs__item"><span aria-current="page">Select courses</span></li>
  </ol>
</nav>

{{-- In the controller --}}
Breadcrumbs::push('Home', '/');
Breadcrumbs::push('Registration', route('registration.index'));
Breadcrumbs::pushAsHeading('Select courses');

{{-- In the view, or nowhere at all: <x-wsu::app-shell> renders it --}}
<x-wsu::breadcrumbs />

<Breadcrumbs
  :items="[
    { label: 'Home', href: '/' },
    { label: 'Registration', href: '/registration' },
    { label: 'Select courses' },
  ]"
/>

Why it works this way

The separator is an aria-hidden svg inside the li. 1.x rendered separators as literal text in the list, so a screen reader read "Home, slash, Registration, slash, Select courses". The ol already conveys the hierarchy.
aria-current="page" goes on the last item and it is not a link. A link to the page you are on is a link that does nothing, and 2.4.8 is satisfied by marking position rather than by offering a no-op.
On the Blade path a controller pushes crumbs and the layout says nothing about them. Rendering the trail does not consume it, so the page header can still read the last crumb for the h1.

Accessibility

nav labeled "Breadcrumb" (2.4.1, 4.1.2).
An ordered list, so position and count are announced.
aria-current="page" on the final item (2.4.8).

Success criteria in brackets refer to WCAG 2.2. Every one of them is checked by axe-core in both themes at three viewport widths before this page can be published. See Accessibility for what the gates are.

Props

Blade

Attribute	Default	What it does
`crumbs`	`the request-scoped service`	Pass an array to render a trail the service does not know about.
`label`	`'Breadcrumb'`	Names the nav landmark.

Vue

Prop	Type and default	What it does
`items`	`Array, []`	[{ label, href }]. The last item renders as the current page.
`label`	`String, 'Breadcrumb'`	Names the nav landmark.
`linkAs`	`String, 'a'`	Inertia Link or RouterLink.

In the markup contract

contract/markup-contract.json is extracted from the two static templates and every package tests against it. This is what it records for .wsu-breadcrumbs.

Template	Elements	Accessibility attributes	Uses
internal apps/examples/static-html/index.html	`nav`	`aria-label`	1
public apps/examples/static-html/public-app.html	`nav`	`aria-label`	1

Breadcrumbs ​