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 最佳实践