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

<Breadcrumbs
  breadcrumbs={ 
    [ 
      {"name": "Level1", "path": "level1"},
      {"name": "Level 2", "path": "level2"},
      {"name": "Level 3", "path": "level3"}
    ] 
  }
  product-number="6R0XXXXXX"
  class="py-1 order-0 px-1 max-w-full flex bg-white"
  show-back
  text-back="Back"
/>

Show home

<Breadcrumbs
  breadcrumbs={ 
    [ 
      {"name": "Level1", "path": "level 1"},
      {"name": "Level 2", "path": "level2"},
      {"name": "Level 3", "path": "level3"}
    ] 
  }
  product-number="6R0XXXXXX"
  class="py-1 order-0 px-1 max-w-full flex bg-white"
  show-home
/>

Simply

<Breadcrumbs
  breadcrumbs={ 
    [ 
      {"name": "Level1", "path": "level 1"},
      {"name": "Level 2", "path": "level2"},
      {"name": "Level 3", "path": "level3"}
    ] 
  }
  product-number="6R0XXXXXX"
  class="py-1 order-0 px-1 max-w-full flex bg-white"
  show-back
  text-back="Back"
/>

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