Breadcrumbs

<Breadcrumbs aria-label="breadcrumbs">
  {/* aria-label must be localized */}
  <Breadcrumb>
    <a href="#">First Link</a>
  </Breadcrumb>
  <Breadcrumb>
    <a href="#">Second Link</a>
  </Breadcrumb>
  <Breadcrumb>Current Page</Breadcrumb>
</Breadcrumbs>

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <!-- the value for aria-label must be localized -->
  <ul>
    <li><a href="somepage">First link</a></li>
    <li><a href="somepage">Second link</a></li>
    <li>Current page</li>
  </ul>
</nav>

Low-level React API

If you need more control over how the Breadcrumbs are rendered, you can use the low-level API.

Here's how you'd re-create the Breadcrumbs component using the lower-level components:

<BreadcrumbsContainer>
  <BreadcrumbList>{children}</BreadcrumbList>
</BreadcrumbsContainer>

Components

What's Under the Hood

<BreadcrumbsContainer {...props}>
  <BreadcrumbList>{children}</BreadcrumbList>
</BreadcrumbsContainer>

Guidelines

Developer Guidelines

Breadcrumbs are important for SEO. The underlying HTML should use the SEO-friendly structured data format below, to tell search engine bots that these links belong to structured breadcrumbs. (Contact the Organic Search team with any questions.)

Example of script to integrate (you should update the "name" and "item" URLs):

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://www.vistaprint.com"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Business Cards",
        "item": "https://www.vistaprint.com/business-cards"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "Square Business Cards",
        "item": "https://www.vistaprint.com/business-cards/square"
      },
      {
        "@type": "ListItem",
        "position": 4,
        "name": "Square Business Card Template & Designs",
        "item": "https://www.vistaprint.com/business-cards/square/templates"
      }
    ]
  }
</script>

Accessibility Guidelines

• The <nav> tag signifies that the breadcrumbs are a navigation landmark.

• The aria-label attribute helps guide users on assistive technologies as to what this particular navigation is. Its value will be displayed to assistive technologies, so the value must be localized.

SEO Considerations

• Breadcrumbs should be integrated on all public indexed pages, in order to help Google have a better understanding of the website hierarchy.

• If a page belongs to two parent pages, you should just display one of those parents on the breadcrumbs to make it easier for bots.

• Breadcrumbs need Structured Data; see Developer Considerations above.