---
title: "Schema.org Breadcrumbs · v2 · Unhead"
meta:
  "og:description": "Use defineBreadcrumb() with an array of { name, item } objects to create breadcrumb navigation markup. Google displays this as a clickable path in search results instead of showing the raw URL."
  "og:title": "Schema.org Breadcrumbs · v2 · Unhead"
  description: "Use defineBreadcrumb() with an array of { name, item } objects to create breadcrumb navigation markup. Google displays this as a clickable path in search results instead of showing the raw URL."
---

**Recipes**

# **Schema.org Breadcrumbs**

**On this page **

- [Useful Links](#useful-links)
- [How do I mark up breadcrumbs?](#how-do-i-mark-up-breadcrumbs)
- [How do I add multiple breadcrumb trails?](#how-do-i-add-multiple-breadcrumb-trails)
- [Related Recipes](#related-recipes)

Use `defineBreadcrumb()` with an array of `{ name, item }` objects to create breadcrumb navigation markup. Google displays this as a clickable path in search results instead of showing the raw URL.

Breadcrumb structured data replaces URLs in search results with a readable navigation path (Home > Category > Page), helping users understand your site hierarchy.

## [Useful Links](#useful-links)

- [**Breadcrumb | Google Search Central**](https://developers.google.com/search/docs/advanced/structured-data/breadcrumb)
- [**Breadcrumb | Yoast**](https://developer.yoast.com/features/schema/pieces/breadcrumb)

## [How do I mark up breadcrumbs?](#how-do-i-mark-up-breadcrumbs)

[**defineBreadcrumb**](https://unhead.unjs.io/docs/v2/schema-org/api/schema/breadcrumb) creates Breadcrumb Schema whilst handling relations for you.

Imagine we want to generate the following markup with the appropriate Schema.

Note: Google recommends that the markup for the breadcrumbs should exist on the page matching the Schema.org entry.

```
import { defineBreadcrumb, useSchemaOrg } from '@unhead/schema-org/solid-js'

const breadcrumbs = [
  // item is the url and will be resolved to the absolute url
  { name: 'Home', item: '/' },
  { name: 'Articles', item: '/blog' },
  // item is not required for the last list element
  { name: 'How do breadcrumbs work' },
]

useSchemaOrg([
  defineBreadcrumb({
    itemListElement: breadcrumbs
  }),
])
```

Here's an example of how you might structure your breadcrumbs in HTML:

```
<ul>
  <li>
    <a href="/">Home</a>
    <span>/</span>
  </li>
  <li>
    <a href="/blog">Articles</a>
    <span>/</span>
  </li>
  <li>
    <span>How do breadcrumbs work</span>
  </li>
</ul>
```

## [How do I add multiple breadcrumb trails?](#how-do-i-add-multiple-breadcrumb-trails)

There may be some cases where you'd like multiple breadcrumbs to be displayed.

For these cases you can provide an `@id` and it will avoid overwriting the primary breadcrumb.

```
import { defineBreadcrumb, useSchemaOrg } from '@unhead/schema-org/solid-js'

useSchemaOrg([
  // primary breadcrumb
  defineBreadcrumb({
    itemListElement: [
      // item is the url and will be resolved to the absolute url
      { name: 'Home', item: '/' },
      { name: 'Articles', item: '/blog' },
      // item is not required for the last list element
      { name: 'How do breadcrumbs work' },
    ]
  }),
  defineBreadcrumb({
    '@id': '#secondary-breadcrumb',
    'itemListElement': [
      // item is the url and will be resolved to the absolute url
      { name: 'Sub Home', item: '/sub' },
      { name: 'Sub Page', item: '/sub/page' },
      { name: 'Sub Element' },
    ]
  }),
])
```

## [Related Recipes](#related-recipes)

- [**Blog Posts**](https://unhead.unjs.io/docs/v2/schema-org/guides/recipes/blog) - Article structured data
- [**E-Commerce**](https://unhead.unjs.io/docs/v2/schema-org/guides/recipes/e-commerce) - Product structured data

[Edit this page](https://github.com/unjs/unhead/edit/v2.1.2/docs/v2/schema-org/2.guides/4.recipes/breadcrumbs.md)

**Did this page help you? **

[**Blog** Use defineArticle() with @type: 'BlogPosting' to mark up blog posts. This enables rich snippets showing author, publish date, and article images in search results.](https://unhead.unjs.io/docs/v2/schema-org/guides/recipes/blog) [**eCommerce** Learn how to implement Schema.org for eCommerce websites to improve search visibility and product rich results.](https://unhead.unjs.io/docs/v2/schema-org/guides/recipes/e-commerce)

**On this page **

- [Useful Links](#useful-links)
- [How do I mark up breadcrumbs?](#how-do-i-mark-up-breadcrumbs)
- [How do I add multiple breadcrumb trails?](#how-do-i-add-multiple-breadcrumb-trails)
- [Related Recipes](#related-recipes)