# Breadcrumb

面包屑

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

## 案例演示

### 基本使用

---demo
```js
import { Breadcrumb } from 'amos-framework';

const BItem = Breadcrumb.Item;

ReactDOM.render((
  <Breadcrumb>
    <BItem>Home</BItem>
    <BItem><a href="">Center</a></BItem>
    <BItem><a href="">AppList</a></BItem>
    <BItem>App One</BItem>
  </Breadcrumb>
), _react_runner_);
```
---demoend

### 自定义分隔符

---demo
```js
import { Breadcrumb } from 'amos-framework';

const BItem = Breadcrumb.Item;

ReactDOM.render((
  <Breadcrumb divider=">">
    <BItem>Home</BItem>
    <BItem href="">Center</BItem>
    <BItem href="">AppList</BItem>
    <BItem>App One</BItem>
  </Breadcrumb>
), _react_runner_);
```
---demoend

### 自定义Icon

---demo
```js
import { Breadcrumb, Icon } from 'amos-framework';

const BItem = Breadcrumb.Item;

ReactDOM.render((
  <Breadcrumb divider=" > ">
    <BItem href=""><Icon icon="collection" /></BItem>
    <BItem href=""><Icon icon="appstore" /><span>AppList</span></BItem>
    <BItem>Application</BItem>
  </Breadcrumb>
), _react_runner_);
```
---demoend

### 和 react-router搭配使用

---demo
```js
import { Breadcrumb } from 'amos-framework';

const BItem = Breadcrumb.Item;

const routes = [{
  path: 'index',
  breadcrumbName: '首页'
}, {
  path: 'first',
  breadcrumbName: '一级面包屑'
}, {
  path: 'second',
  breadcrumbName: '当前页面'
}];

ReactDOM.render((
  <Breadcrumb routes={routes} />
), _react_runner_);
```
---demoend


## props

| params  | type | default | description |
| --- | --- | --- | --- |
| prefixCls | string | `amos-breadcrumb` | css class 前缀 |
| className | string | - | css class |
| children | ReactNode | - | 内容 |
| itemRender | `(route, params, routes, paths) => ReactNode` | - | 自定义链接函数，和 react-router 配置使用 |
| params | object | - | 路由的参数 |
| routes | `array: object[]` | - | router 的路由栈信息 |
| divider |string or ReactNode | `/` | 分隔符自定义 |