Breadcrumbs

Use Breadcrumbs...

On multi-level pages that have a hierarchy grouping.
As a secondary (supplemental) navigation menu to provide users an easier way to navigate to higher-level categories.
At the top of the page just below the navigation bar and promo bar.

Don't use Breadcrumbs...

On single-level pages that have no logical hierarchy or grouping.
As a primary navigation menu, which will make it hard to navigate to other sections of the site.
That wraps to multiple lines.

Breadcrumbs is a simple-to-use convenience component that handles most typical use cases. It consists of a number of Breadcrumb components, each of which contains a Link. Refer to Link for further details.

Use aria-current="page" on the current page, ensuring that a link pointing to itself is present. This facilitates assistive technologies in announcing the current page.

ReactVanilla

<Breadcrumbs>
  <Breadcrumb>
    <Link href="#first">First Link</Link>
  </Breadcrumb>
  <Breadcrumb>
    <Link href="#second">Second Link</Link>
  </Breadcrumb>
  <Breadcrumb>
    <Link href="#" aria-current="page">
      Current Page
    </Link>
  </Breadcrumb>
</Breadcrumbs>

<Breadcrumbs>
  <Breadcrumb>
    <Link href="#first">First Link</Link>
  </Breadcrumb>
  <Breadcrumb>
    <Link href="#second">Second Link</Link>
  </Breadcrumb>
  <Breadcrumb>
    <Link href="#" aria-current="page">
      Current Page
    </Link>
  </Breadcrumb>
</Breadcrumbs>

<nav class="swan-breadcrumbs">
  <ul>
    <li><a href="#first" class="swan-link">First Link</a></li>
    <li><a href="#second" class="swan-link">Second Link</a></li>
    <li>
      <a href="#" aria-current="page" class="swan-link">Current Page</a>
    </li>
  </ul>
</nav>

<nav class="swan-breadcrumbs">
  <ul>
    <li><a href="#first" class="swan-link">First Link</a></li>
    <li><a href="#second" class="swan-link">Second Link</a></li>
    <li>
      <a href="#" aria-current="page" class="swan-link">Current Page</a>
    </li>
  </ul>
</nav>

BreadcrumbsContainer

When you need more control than the Breadcrumbs convenience container provides, use the underlying components that Breadcrumbs is made of: a BreadcrumbsContainer wrapping a BreadcrumbList, which itself wraps the Breadcrumb components.

ReactVanilla

<BreadcrumbsContainer>
  <BreadcrumbList>
    <Breadcrumb>
      <a href="#">Test Link</a>
    </Breadcrumb>
    <Breadcrumb>
      <a href="#">Second Link</a>
    </Breadcrumb>
    <Breadcrumb>
      <a href="#" aria-current="page">
        Current Page
      </a>
    </Breadcrumb>
  </BreadcrumbList>
</BreadcrumbsContainer>

<BreadcrumbsContainer>
  <BreadcrumbList>
    <Breadcrumb>
      <a href="#">Test Link</a>
    </Breadcrumb>
    <Breadcrumb>
      <a href="#">Second Link</a>
    </Breadcrumb>
    <Breadcrumb>
      <a href="#" aria-current="page">
        Current Page
      </a>
    </Breadcrumb>
  </BreadcrumbList>
</BreadcrumbsContainer>

<nav class="swan-breadcrumbs">
  <ul>
    <li><a href="#">Test Link</a></li>
    <li><a href="#">Second Link</a></li>
    <li><a href="#" aria-current="page">Current Page</a></li>
  </ul>
</nav>

<nav class="swan-breadcrumbs">
  <ul>
    <li><a href="#">Test Link</a></li>
    <li><a href="#">Second Link</a></li>
    <li><a href="#" aria-current="page">Current Page</a></li>
  </ul>
</nav>

Implementation

Use the SEO-friendly structured data format below for Breadcrumbs. This format informs search engine bots that the links belong to structured Breadcrumbs, enhancing the SEO impact. Contact the Organic Search team at #help-seo with any questions.

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>

<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>

SEO considerations

Integrate Breadcrumbs on all public indexed pages to help Google have a better understanding of the website hierarchy.
If a page belongs to two-parent pages, display one of those parents on the Breadcrumbs to make it easier for bots.
Breadcrumbs need Structured Data; see Implementation above.