Breadcrumbs

Breadcrumbs component with BreadcrumbList Microdata.

Structured Data for Breadcrumbs that produce a Rich Snippet (in this case breadcrumbs) in search results that are clickable, too!

https://schema.org/BreadcrumbList

https://schema.org/ListItem

Show back

<script setup>
import Breadcrumbs from 'spoko-design-system/src/components/Breadcrumbs.vue';

const trail = [
{ name: 'Level 1', path: '/level1' },
{ name: 'Level 2', path: '/level2' },
{ name: 'Level 3', path: '/level3' },
];
</script>

<Breadcrumbs
  :breadcrumbs="trail"
  suffix="6R0XXXXXX"
  class="py-1 px-1 max-w-full flex bg-white"
  show-back
  text-back="Back"
/>

Show home

<Breadcrumbs
:breadcrumbs="trail"
suffix="6R0XXXXXX"
class="py-1 px-1 max-w-full flex bg-white"
show-home
/>

Simply

<Breadcrumbs
:breadcrumbs="trail"
suffix="6R0XXXXXX"
class="py-1 px-1 max-w-full flex bg-white"
/>

Hide parts on mobile

Use hideOnMobile to hide selected parts below the sm breakpoint (640px); they reappear from sm up. Accepted parts: 'suffix', 'home', 'separators', 'trail'. It defaults to ['suffix'], so pass [] to show everything on mobile, or list more parts to hide. Resize the preview below to see the suffix and separators come and go.

<Breadcrumbs
:breadcrumbs="trail"
suffix="6R0XXXXXX"
:hide-on-mobile="['suffix', 'separators']"
class="py-1 px-1 max-w-full flex bg-white"
/>

Props

Microdata Control

When rendering breadcrumbs multiple times on the same page (e.g., mobile and desktop versions), use withMicrodata to prevent duplicate Schema.org markup:

<!-- Desktop version - WITH microdata (default) -->
<Breadcrumbs
  breadcrumbs={[...]}
  class="hidden md:block"
/>

<!-- Mobile version - WITHOUT microdata -->
<Breadcrumbs
  breadcrumbs={[...]}
  class="block md:hidden"
  :withMicrodata="false"
/>

Schema support:

• https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=en

Example

• https://validator.schema.org/?hl=en-US#url=https%3A%2F%2Fcatalog.polo.blue%2FN10733102%2F