---
name: Breadcrumb 面包屑
route: /breadcrumb
parent: 组件
menu: 导航
---
import { Playground, Props } from 'docz'
import  Breadcrumb  from '../components/breadcrumb'

# Breadcrumb
>提示: 展开代码编辑器可以在线编辑，实时生效

显示当前页面在系统层级结构中的位置，并能向上返回

## 何时使用
- 当系统拥有超过两级以上的层级结构时
- 当需要告知用户『你在哪里』时
- 当需要向上导航的功能时

## 基础用法
适用广泛的基础用法

<Playground>
    <Breadcrumb options={[{label:'一级菜单',link:'/level1'},{label:'二级菜单',link:'/level2'},{label:'三级菜单'}]}/>
    
</Playground>

## 带有图标的
图标放在文字前面


<Playground>
    <Breadcrumb options={[{label:'',link:'/level1', icon: 'Home'},{label:'二级菜单',link:'/level2', icon: 'Person'},{label:'三级菜单'}]}/>
</Playground>


说明：为了减小打包大小，kwai-ui打包的时候把路由依赖`react-router-dom`指定为external，大部分情况下，项目中都会包含`react-router`，如果你的项目中没有安装router，需要先安装依赖面包屑组件才能正常工作。
```javascript
npm i -S react-router-dom
```

## API

<Props of={Breadcrumb} />