Breadcrumb

Type: "breadcrumb"

Manual breadcrumb trail (Home > Section > Page). Auto-emits BreadcrumbList JSON-LD for SEO rich result eligibility.

Props

Field	Type	Default	Description
dataSource	'auto'|'manual'	"auto"	Sumber Data
items	Array<object>	[{"id":"bc-1","label":"Home","url":"/"},{"id":"bc-2","label":"Catalog","url":"/catalog"},{"id":"bc-3","label":"Current Page","url":"#"}]	BreadcrumbItem[] — each: { id, label, url } (1-10 items) (shown when dataSource = manual)
items[].label	string	—	Label
items[].url	string	—	URL
showBlogArchive	boolean	true	Sertakan langkah arsip Blog (shown when dataSource = auto)
showCatalog	boolean	true	Sertakan langkah Katalog (shown when dataSource = auto)
showCategory	boolean	true	Sertakan kategori post/product (shown when dataSource = auto)
hideCurrentItem	boolean	false	Sembunyikan halaman saat ini (shown when dataSource = auto)
separator	'slash'|'arrow'|'chevron'|'dot'	"chevron"	Separator
homeLabel	string	"Home"	Label Home
showHomeIcon	boolean	true	show Home icon on first item
homeUrl	string	"/"	URL for home link
color	CSS color	—	link color (CSS)
activeColor	CSS color	—	last item (current page) color
separatorColor	CSS color	—	separator char color

Example

{
  "id": "bre01abc",
  "type": "breadcrumb",
  "props": {
    "dataSource": "auto",
    "items": [
      {
        "id": "bc-1",
        "label": "Home",
        "url": "/"
      },
      {
        "id": "bc-2",
        "label": "Catalog",
        "url": "/catalog"
      },
      {
        "id": "bc-3",
        "label": "Current Page",
        "url": "#"
      }
    ],
    "separator": "chevron",
    "showHomeIcon": true,
    "homeUrl": "/",
    "homeLabel": "Home",
    "showBlogArchive": true,
    "showCatalog": true,
    "showCategory": true,
    "hideCurrentItem": false
  }
}