Breadcrumb

Shows where the current page sits in the hierarchy.

When to use it

• Pages nested two or more levels deep.

When not to use it

• Top-level pages, where it says nothing.

Examples

Each example is a conformance case: every emitter — React, and each framework adapter — is checked against exactly this markup.

two-levels

<nav class="gov-breadcrumb" aria-label="Breadcrumb">
  <ol class="gov-breadcrumb__list">
    <li class="gov-breadcrumb__item">
      <a class="gov-breadcrumb__link" href="/">EMS Portal</a>
    </li>
    <li class="gov-breadcrumb__item">
      <span class="gov-breadcrumb__current" aria-current="page">Employees</span>
    </li>
  </ol>
</nav>

{
  "items": [
    {
      "label": "EMS Portal",
      "href": "/"
    },
    {
      "label": "Employees"
    }
  ]
}

three-levels

<nav class="gov-breadcrumb" aria-label="Breadcrumb">
  <ol class="gov-breadcrumb__list">
    <li class="gov-breadcrumb__item">
      <a class="gov-breadcrumb__link" href="/">EMS Portal</a>
    </li>
    <li class="gov-breadcrumb__item">
      <a class="gov-breadcrumb__link" href="/employees">Employees</a>
    </li>
    <li class="gov-breadcrumb__item">
      <span class="gov-breadcrumb__current" aria-current="page">Himanshu Dubey</span>
    </li>
  </ol>
</nav>

{
  "items": [
    {
      "label": "EMS Portal",
      "href": "/"
    },
    {
      "label": "Employees",
      "href": "/employees"
    },
    {
      "label": "Himanshu Dubey"
    }
  ]
}

Accessibility

Accessible name. The nav landmark label, 'Breadcrumb' by default.

• An ordered list, so a screen reader announces how many levels there are.
• The current page is a span with aria-current='page', not a link to itself.

Class names

View the manifest for this component: packages/manifest/components/breadcrumb.json