---
url: https://ain.hmgf.hxcn.space/contribution/project-components/breadcrumbs.md
description: 面包屑导航组件，支持手动定义路径、长路径折叠以及站点正文顶部自动导航。
---

# Breadcrumbs 组件

站点正文顶部已经默认接入 `Breadcrumbs`。如果你在文档内容里也需要手动展示路径，同样可以直接使用这个组件。

现在正文顶部的面包屑会根据容器宽度与屏幕方向自动折叠：横屏优先保留首页和末尾关键层级，竖屏优先保留首页与当前页；当前页标题会按剩余空间单行省略，并在截断时通过 `Popover` 展示完整文本。

桌面端文档页在向下滚动进入正文后，导航栏里的 tabs 会做简单位移淡出，并由与正文区域水平对齐的面包屑导航接替。

下面的演示路径统一对齐当前站点的信息架构，方便和正文顶部自动面包屑的实际效果直接对照。

## 手动用法

```md
<Breadcrumbs
  :items="[
    { key: 'resource', text: '资源', href: '/resource/' },
    { key: 'contribute', text: '贡献项目', href: '/resource/#贡献项目' },
    { key: 'components', text: '项目组件', href: '/resource/project-components' },
    { key: 'content', text: '内容展示', href: '/resource/project-components#内容展示' },
    { key: 'kbd', text: 'Kbd 组件', current: true }
  ]"
/>
```

## 自定义分隔符

## 长路径折叠

## 站点级自动面包屑

## Props

| 参数 | 类型 | 默认值 | 说明 | 示例 |
| --- | --- | --- | --- | --- |
| `items` | `BreadcrumbItem[]` | - | 面包屑项数组。 | `:items="[{ key: 'a', text: '资源' }]"` |
| `separator` | `string` | `>` | 分隔符。 | `separator="/"` |