Breadcrumb

Type: "breadcrumb"

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

Props

Field	Type	Default	Keterangan
dataSource	'auto'|'manual'	"auto"	Auto: trail dirakit dari halaman saat ini (post/product/category/dll). Manual: input items sendiri.
items	Array<object>	[{"id":"bc-1","label":"Home","url":"/"},{"id":"bc-2","label":"Catalog","url":"/catalog"},{"id":"bc-3","label":"Current Page","url":"#"}]	Crumbs (tampil saat dataSource = manual)
items[].label	string	—	Label
items[].url	string	—	URL
showBlogArchive	boolean	true	Sertakan langkah arsip Blog (tampil saat dataSource = auto)
showCatalog	boolean	true	Sertakan langkah Katalog (tampil saat dataSource = auto)
showCategory	boolean	true	Sertakan kategori post/product (tampil saat dataSource = auto)
hideCurrentItem	boolean	false	Sembunyikan halaman saat ini (tampil saat dataSource = auto)
separator	'slash'|'arrow'|'chevron'|'dot'	"chevron"	Separator
homeLabel	string	"Home"	Label Home
showHomeIcon	boolean	true	Tampilkan icon Home
homeUrl	string	"/"	URL Home
color	CSS color	—	Mengontrol warna teks breadcrumb. Sama dengan Style > Typography > Color.
activeColor	CSS color	—	Warna Item Aktif (terakhir)
separatorColor	CSS color	—	Warna Separator

Contoh

{
  "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
  }
}