Breadcrumbs | Unhead

Creating breadcrumbs on your site is a great way to help your users understand your website hierarchy.

Useful Links

Marking up Breadcrumbs

The defineBreadcrumb function and SchemaOrgBreadcrumb component are provided to create 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.

Composition API

<script setup lang="ts">
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
  }),
])
</script>
<template>
  <ul>
    <template v-for="(item, key) in breadcrumbs" :key="key">
      <li>
        <template v-if="item.item">
          <a :href="item.item">{{ item.name }}</a>
          <span>/</span>
        </template>
        <span v-else>{{ item.name }}</span>
      </li>
    </template>
  </ul>
</template>

Adding Multiple Breadcrumbs

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.

<script setup lang="ts">
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' },
    ]
  }),
])
</script>