Breadcrumbs

Breadcrumbs are typically located at the top of the page and contain navigational links. They indicate the user's location within the site hierarchy.

UsageGuidelinesAPI

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.

Content

The Breadcrumb component provides a series of links to indicate the current page location and hierarchical pages which ladder up to it. Start the full navigational path with “Home”, followed by any pages associated with the current page's path, followed by the current page

Props

BreadcrumbsContainer

This component is implemented using the <nav /> as the root element. You can utilize the native attributes supported by <nav /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

BreadcrumbList

This component is implemented using the <ul /> as the root element. You can utilize the native attributes supported by <ul /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

Breadcrumb

This component is implemented using the <li /> as the root element. You can utilize the native attributes supported by <li /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

Link

Was this page useful?

Published: Jan 7, 2022Last updated: Oct 17, 2024

Box

Button

Breadcrumbs

Use Breadcrumbs...

Don't use Breadcrumbs...

Breadcrumbs

BreadcrumbsContainer

Implementation

SEO considerations

Content

Props

Related