# Breadcrumb

面包屑导航组件，用于展示当前页面在层级结构中的位置，帮助用户快速返回上级。

## 适用场景

- 多层级页面导航路径展示
- 帮助用户了解当前所处位置并快速返回上级
- 配合路由系统展示页面层级

## Props - Breadcrumb

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| size | `"md" \| "sm"` | `-` | 否 | 尺寸，默认使用 config context `baseSize` |
| data | `CrumbItem[]` | `-` | 否 | 面包屑节点数据，如用 children 自定义面包屑节点则会忽略 |
| divider | `ReactNode` | `-` | 否 | 节点分割符 |
| renderCrumbItem | `(crumbItem: CrumbItem, crumbIndex: number) => ReactNode` | `-` | 否 | 面包屑节点内容渲染器，用以自定义节点内容（如 ReactRouter Link） |

## Props - CrumbItem

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| id | `string` | `-` | 否 | 唯一标识 |
| label | `ReactNode` | `-` | 否 | 显示值 |
| content | `ReactNode` | `-` | 否 | 自定义渲染内容，提供时 `label`、`href`、`onClick`、`disabled` 等 link 属性将无效 |
| disabled | `boolean` | `-` | 否 | 禁用 |

## Props - Crumb

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |

## 典型用法

### 基础用法

```tsx
import {Icon} from '@befe/brick-comp-icon'
import {SvgHome} from '@befe/brick-icon'
import {Breadcrumb} from '@befe/brick'

const dataList = [
    {label: <><Icon svg={SvgHome} />首页</>, href: '#'},
    {label: '一级页面'},
    {label: '末级页面'},
]

<Breadcrumb data={dataList} />
```

### 尺寸

```tsx
<Breadcrumb data={dataList} size={'sm'} />
<Breadcrumb data={dataList} size={'md'} />
```

### 自定义分隔符

```tsx
<Breadcrumb data={dataList} divider={'/'} />
```

## 注意事项

- 末级页面通常不设置 `href`，表示当前所在页面
- 如需使用 ReactRouter 的 Link 组件，可通过 `renderCrumbItem` 自定义渲染
- `content` 属性优先级高于 `label`，提供 `content` 后其他 link 属性（`href`、`onClick`、`disabled`）无效