---
title: "Schema.org Breadcrumbs · Unhead"
canonical_url: "https://unhead.unjs.io/docs/typescript/schema-org/guides/recipes/breadcrumbs"
last_updated: "2026-07-21T16:59:58.363Z"
meta:
  description: "Add BreadcrumbList structured data with defineBreadcrumb() so Google can use a page hierarchy in search results."
  "og:description": "Add BreadcrumbList structured data with defineBreadcrumb() so Google can use a page hierarchy in search results."
  "og:title": "Schema.org Breadcrumbs · Unhead"
---

Home

`
Unhead on GitHub

Switch to TypeScriptSwitch to VueSwitch to ReactSwitch to SvelteSwitch to Solid.jsSwitch to AngularSwitch to Nuxt

**Recipes**

# **Schema.org Breadcrumbs**

[Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/schema-org/2.guides/4.recipes/breadcrumbs.md)

Use `**defineBreadcrumb()**` with an array of `**{ name, item }**` objects to create breadcrumb navigation markup. Google may use this markup to categorize a page in search results.

Breadcrumb structured data describes a readable navigation path such as Home > Category > Page. Search appearance is not guaranteed.

## Useful Links

- [**~~BreadcrumbList - Schema.org~~**](https://schema.org/BreadcrumbList)
- [**~~Breadcrumb | Google Search Central~~**](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb)

## How do I mark up breadcrumbs?

[**~~defineBreadcrumb~~**](https://unhead.unjs.io/docs/schema-org/api/schema/breadcrumb) creates a BreadcrumbList node and handles its ListItem relationships.

The following example generates structured data for the matching visible breadcrumb navigation.

Google requires the breadcrumb markup to represent a typical user path to the page.

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

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
  }),
])
```

The visible breadcrumb navigation can use the same items:

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

Give each additional trail its own `**@id**` so it does not overwrite the primary breadcrumb.

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

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

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

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

[~~Markdown For LLMs~~](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/schema-org/2.guides/4.recipes/breadcrumbs.md)

**Did this page help you? **

[**Blog** Add Article or BlogPosting structured data with defineArticle() so search engines can understand a post and its author, dates, and images.](https://unhead.unjs.io/docs/schema-org/guides/recipes/blog) [**E-commerce** Add Product structured data with defineProduct() so product pages can become eligible for search features showing prices, ratings, availability, and reviews.](https://unhead.unjs.io/docs/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)