---
url: /components/breadcrumb.md
---
# Breadcrumb 面包屑

> 移动端：层级链由返回栏承担，参见 [移动端 · 页面导航](/mobile/navigation)。

显示当前页面在层级结构中的位置：支持插槽式与 items 配置式两种写法，设置 `to` 的项渲染为链接样式，点击时优先用注入的 router 跳转，http(s) 外链则直接整页跳转；分隔符支持文本与图标两种形式。

## 基础用法

按挂载顺序自动识别最后一项为当前页（不带分隔符、无链接样式），其余项设 `to` 后呈现可点击的链接态。

## 配置式用法

传入 `items` 数组即可渲染，适合由路由表或后台菜单驱动的场景；item 的 `icon` 渲染为前置图标（字符串图标名），`to` / `replace` 语义与插槽式一致。

## 对象地址与 replace 模式

`to` 可传路由 location 对象（如 `{ path: '/project' }`）；`replace` 为 true 时使用 router.replace 跳转，不留历史记录。应用未注入 router 时仅 http(s) 字符串外链会跳转（window.location），对象地址不产生动作，生产环境请配合 vue-router 使用。

## 外链跳转

`to` 为 http(s) 地址时点击直接整页跳转（window.location），不依赖 router 注入，适合跨越到外部系统的入口（点击会离开当前文档站）。

## 插槽自定义内容

默认插槽完全自定义项内容，可混排图标、文本等元素；不影响最后一项判定与分隔符渲染。

## 自定义分隔符

`separator` 自定义分隔文本；`separator-icon` 设置图标后替代文本，两者均由 item 从父级注入。`separator-spacing` 调整分隔符与两侧项的间距（数字按 px，字符串支持 px / pt / em 等单位）。

## API