Schema.org Breadcrumbs · Unhead

[Unhead Home](https://unhead.unjs.io/ "Home")

- [Docs](https://unhead.unjs.io/docs/typescript/head/guides/get-started/overview)
- [Tools](https://unhead.unjs.io/tools)
- [Learn](https://unhead.unjs.io/learn/guides/what-is-capo)

[Releases](https://unhead.unjs.io/releases)

Search…```k`` /`

[Unhead on GitHub](https://github.com/unjs/unhead)

[User Guides](https://unhead.unjs.io/docs/typescript/head/guides/get-started/overview)

[API](https://unhead.unjs.io/docs/typescript/head/api/get-started/overview)

[Releases](https://unhead.unjs.io/docs/typescript/releases/v3)

TypeScript

- [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/schema-org/guides/recipes/breadcrumbs)
- [Switch to Vue](https://unhead.unjs.io/docs/vue/schema-org/guides/recipes/breadcrumbs)
- [Switch to React](https://unhead.unjs.io/docs/react/schema-org/guides/recipes/breadcrumbs)
- [Switch to Svelte](https://unhead.unjs.io/docs/svelte/schema-org/guides/recipes/breadcrumbs)
- [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/schema-org/guides/recipes/breadcrumbs)
- [Switch to Angular](https://unhead.unjs.io/docs/angular/schema-org/guides/recipes/breadcrumbs)
- [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/schema-org/guides/recipes/breadcrumbs)

v3 (stable)

Schema.org

- [Discord Support](https://discord.com/invite/275MBUBvgP)
- [TypeScript Playground](https://stackblitz.com/edit/github-hhxywsb5)

- Get Started
  - [Introduction](https://unhead.unjs.io/docs/typescript/schema-org/guides/get-started/overview)
- Core Concepts
  - [Deduping Nodes](https://unhead.unjs.io/docs/typescript/schema-org/guides/core-concepts/deduping-nodes)
  - [Supported Nodes](https://unhead.unjs.io/docs/typescript/schema-org/guides/core-concepts/nodes)
  - [Schema.org Params](https://unhead.unjs.io/docs/typescript/schema-org/guides/core-concepts/params)
- Recipes
  - [Custom Nodes](https://unhead.unjs.io/docs/typescript/schema-org/guides/recipes/custom-nodes)
  - [Identity](https://unhead.unjs.io/docs/typescript/schema-org/guides/recipes/identity)
  - [Blog](https://unhead.unjs.io/docs/typescript/schema-org/guides/recipes/blog)
  - [Breadcrumbs](https://unhead.unjs.io/docs/typescript/schema-org/guides/recipes/breadcrumbs)
  - [eCommerce](https://unhead.unjs.io/docs/typescript/schema-org/guides/recipes/e-commerce)
  - [FAQ](https://unhead.unjs.io/docs/typescript/schema-org/guides/recipes/faq)
  - [How To](https://unhead.unjs.io/docs/typescript/schema-org/guides/recipes/how-to)
  - [Site Search](https://unhead.unjs.io/docs/typescript/schema-org/guides/recipes/site-search)

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)

Last updated Jan 19, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [docs: sync](https://github.com/unjs/unhead/commit/d2f86454774aa60706628b46a850653e1e4d56d9).

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

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/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](#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/BlogPosting structured data with defineArticle(). Enable rich snippets for author, publish date, and thumbnails in search results.](https://unhead.unjs.io/docs/schema-org/guides/recipes/blog) [eCommerce Add Product structured data with defineProduct(). Enable rich results with prices, ratings, stock status, and reviews in search.](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)

[GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP)

[ /llms.txt](https://unhead.unjs.io/llms.txt)

[Part of the UnJS ecosystem](https://unjs.io/)

### Head Management

- [Getting Started](https://unhead.unjs.io/docs/typescript/head/guides/get-started/overview)
- [useHead](https://unhead.unjs.io/docs/typescript/head/api/composables/use-head)
- [useSeoMeta](https://unhead.unjs.io/docs/typescript/head/api/composables/use-seo-meta)
- [useHeadSafe](https://unhead.unjs.io/docs/typescript/head/api/composables/use-head-safe)
- [useScript](https://unhead.unjs.io/docs/typescript/head/api/composables/use-script)

### Schema.org

- [Getting Started](https://unhead.unjs.io/docs/typescript/schema-org/guides/get-started/overview)
- [useSchemaOrg](https://unhead.unjs.io/docs/typescript/schema-org/api/composables/use-schema-org)
- [Nodes](https://unhead.unjs.io/docs/typescript/schema-org/guides/core-concepts/nodes)
- [Recipes](https://unhead.unjs.io/docs/typescript/schema-org/guides/recipes/identity)

### Guides

- [Titles](https://unhead.unjs.io/docs/typescript/head/guides/core-concepts/titles)
- [Streaming SSR](https://unhead.unjs.io/docs/typescript/head/guides/core-concepts/streaming)
- [DOM Events](https://unhead.unjs.io/docs/typescript/head/guides/core-concepts/dom-event-handling)
- [Plugins](https://unhead.unjs.io/docs/typescript/head/guides/plugins/template-params)

### Tools

- [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator)
- [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator)
- [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator)
- [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer)

### Articles

- [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo)

### Research

- [State of <head> in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026)
- [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance)
- [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research)

Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)