SwBreadcrumb

SwBreadcrumb 是 headless 麵包屑導航：由 items（首→末）一串 { name, to? } 驅動。有 to 的中間項渲染為 SwLink（真實 <a>，SEO / a11y 友善），末項 = 當前頁一律渲染為不可點的 <span> + aria-current="page"（NN/g、Google 麵包屑規範），即使給了 to 也不可點。

schema 預設開 —— 用同一份 items 呼叫 useSchemaOrg(defineBreadcrumb(...)) 輸出 BreadcrumbList 結構化資料，讓可見麵包屑與 JSON-LD 單一資料來源，杜絕兩者各改各的漂移。開啟後頁面不要再手寫 defineBreadcrumb。

視覺走「最小必要基礎樣式」（橫排 + 分隔符 + 當前頁高亮），字級 / 顏色 / hover 由 applier 覆寫。

連結色：麵包屑裡的連結由 SwLink 渲染、預設主色。要改成弱化色，在容器上設 CSS 變數 --sw-link-color: var(--muted-foreground)（按變數級聯生效），別寫 .sw-link { color }（等特異性賭 CSS 來源順序、dev/prod 會翻轉）。

基礎用法

末項不給 to 即當前頁（也可給 to，僅用於 JSON-LD，視覺仍不可點）：

<script setup lang="ts">
const crumbs = [
  { name: '首頁', to: '/' },
  { name: '短影音', to: '/shorts' },
  { name: '熱播推薦' },
]
</script>

<template>
  <SwBreadcrumb :items="crumbs" />
</template>

自訂分隔符

separator prop 改分隔符文字；#separator 插槽可放任意內容：

自訂單項渲染

#item 插槽完全接管單項渲染，作用域暴露 { item, isLast }：

BreadcrumbList JSON-LD（schema）

schema 預設 true：元件用同一份 items 輸出 BreadcrumbList 結構化資料（item 取各項 to，末項無 to 時省略）。這讓可見麵包屑與結構化資料單一資料來源，避免「頁面手寫 defineBreadcrumb 與可見 UI 各改各的」漂移。

• 用了 SwBreadcrumb（schema 開）的頁面不要再手寫 useSchemaOrg(defineBreadcrumb(...))，否則重複輸出。
• 頁面已自行管理結構化資料時，傳 :schema="false" 只渲染可見 UI。

Props

SwBreadcrumbItem：{ name: string; to?: string }。to 省略 = 不可點；末項無論是否給 to 都渲染為當前頁（to 僅供 JSON-LD item）。

Slots

注意事項

• 末項始終是當前頁：末項一律不可點 + aria-current="page"（即使給了 to），符合 NN/g / Google 麵包屑規範。
• 單源、防漂移：schema 開時可見 UI 與 JSON-LD 同出一份 items；別再在頁面手寫 defineBreadcrumb。
• 連結色：蓋 --sw-link-color 變數改連結色，不要寫 .sw-link { color }。
• 無內建視覺品牌：只給橫排 + 分隔符 + 當前頁高亮的最小樣式，其餘由 applier 覆寫（蓋 .sw-breadcrumb）。

相關

• SwLink · SEO 最佳實踐