Recipes
Breadcrumbs
Creating breadcrumbs on your site is a great way to help your users understand your website hierarchy.
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.
useSchemaOrg
<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>