docs: add(translation)component/breadcrumb (#1969)

components/breadcrumb/demo/basic.md

@@ -1,19 +1,27 @@
 ---
 order: 0
-title: 基本
+title:   
+  zh-CN: 基本
+  en-US: Basic Usage
 ---
 
+## zh-CN
+
 最简单的用法。
 
+## en-US
+
+The simplest use
+
 ````jsx
 import { Breadcrumb } from 'antd';
 
 ReactDOM.render(
   <Breadcrumb>
-    <Breadcrumb.Item>首页</Breadcrumb.Item>
+    <Breadcrumb.Item>Home</Breadcrumb.Item>
-    <Breadcrumb.Item><a href="">应用中心</a></Breadcrumb.Item>
+    <Breadcrumb.Item><a href="">Application Center</a></Breadcrumb.Item>
-    <Breadcrumb.Item><a href="">应用列表</a></Breadcrumb.Item>
+    <Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>
-    <Breadcrumb.Item>某应用</Breadcrumb.Item>
+    <Breadcrumb.Item>An Application</Breadcrumb.Item>
   </Breadcrumb>
 , mountNode);
 ````

components/breadcrumb/demo/router.md

@@ -1,11 +1,19 @@
 ---
 order: 2
 iframe: true
-title: 路由
+title: 
+  zh-CN: 路由
+  en-US: React Router Integration
 ---
 
+## zh-CN
+
 和 `react-router@2.x` 进行结合使用。
 
+## en-US
+
+Used together with `react-router@2.x`.
+
 ````jsx
 import { Router, Route, Link, hashHistory } from 'react-router';
 import { Breadcrumb } from 'antd';
@@ -13,10 +21,10 @@ import { Breadcrumb } from 'antd';
 const Apps = () => (
   <ul className="app-list">
     <li>
-      <Link to="/apps/1">应用1</Link>：<Link to="/apps/1/detail">详情</Link>
+      <Link to="/apps/1">Application1</Link>：<Link to="/apps/1/detail">Detail</Link>
     </li>
     <li>
-      <Link to="/apps/2">应用2</Link>：<Link to="/apps/2/detail">详情</Link>
+      <Link to="/apps/2">Application2</Link>：<Link to="/apps/2/detail">Detail</Link>
     </li>
   </ul>
 );
@@ -24,8 +32,8 @@ const Apps = () => (
 const Home = (props) => (
   <div>
     <div className="demo-nav">
-      <Link to="/">首页</Link>
+      <Link to="/">Home</Link>
-      <Link to="/apps">应用列表</Link>
+      <Link to="/apps">Application List</Link>
     </div>
     {props.children || 'Home'}
     <div
@@ -36,7 +44,7 @@ const Home = (props) => (
         borderBottom: '1px dashed #ccc',
       }}
     >
-      点击上面的导航切换页面，面包屑在下面：
+      Click the navigation above to switch the page,breadcrumb is right here:
     </div>
     <Breadcrumb {...props} />
   </div>
@@ -44,10 +52,10 @@ const Home = (props) => (
 
 ReactDOM.render(
   <Router history={hashHistory}>
-    <Route name="home" breadcrumbName="首页" path="/" component={Home}>
+    <Route name="home" breadcrumbName="Home" path="/" component={Home}>
-      <Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
+      <Route name="apps" breadcrumbName="Application List" path="apps" component={Apps}>
-        <Route name="app" breadcrumbName="应用:id" path=":id">
+        <Route name="app" breadcrumbName="Application:id" path=":id">
-          <Route name="detail" breadcrumbName="详情" path="detail" />
+          <Route name="detail" breadcrumbName="Detail" path="detail" />
         </Route>
       </Route>
     </Route>

components/breadcrumb/demo/separator.md

@@ -1,19 +1,27 @@
 ---
 order: 3
-title: 分隔符
+title: 
+  zh-CN: 分隔符
+  en-US: Configuring the Separator
 ---
 
+## zh-CN
+
 使用 `separator=">"` 可以自定义分隔符。
 
+## en-US
+
+The separator can be customized by setting the separator property: separator=">"
+
 ````jsx
 import { Breadcrumb } from 'antd';
 
 ReactDOM.render(
   <Breadcrumb separator=">">
-    <Breadcrumb.Item>首页</Breadcrumb.Item>
+    <Breadcrumb.Item>Home</Breadcrumb.Item>
-    <Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
+    <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
-    <Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
+    <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
-    <Breadcrumb.Item>某应用</Breadcrumb.Item>
+    <Breadcrumb.Item>An Application</Breadcrumb.Item>
   </Breadcrumb>
 , mountNode);
 ````

components/breadcrumb/demo/withIcon.md

@@ -1,10 +1,18 @@
 ---
 order: 1
-title: 带有图标的
+title:
+  zh-CN: 带有图标的
+  en-US: With an Icon
 ---
 
+## zh-CN
+
 图标放在文字前面。
 
+## en-US
+
+The icon should be placed in front of the text.
+
 ````jsx
 import { Breadcrumb, Icon } from 'antd';
 
@@ -15,10 +23,10 @@ ReactDOM.render(
     </Breadcrumb.Item>
     <Breadcrumb.Item href="">
       <Icon type="user" />
-      应用列表
+      Application List
     </Breadcrumb.Item>
     <Breadcrumb.Item>
-      应用
+      Application
     </Breadcrumb.Item>
   </Breadcrumb>
 , mountNode);

components/breadcrumb/index.en-US.md

@@ -0,0 +1,32 @@
+---
+category: Components
+type: Navigation
+title: Breadcrumb
+---
+
+A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up within the hierarchy.
+
+## When to use
+
+- When the system has more than two layers in a hierarchy.
+- When you need to inform the user of where they are.
+- When the user may need to navigate back to a higher level When the application has multi-layer architecture.
+
+## API
+
+```html
+<Breadcrumb>
+  <Breadcrumb.Item>Home</Breadcrumb.Item>
+  <Breadcrumb.Item>Application Center</Breadcrumb.Item>
+  <Breadcrumb.Item>Application List</Breadcrumb.Item>
+  <Breadcrumb.Item>An Application</Breadcrumb.Item>
+</Breadcrumb>
+```
+
+| Property      | Description                              | Type              |  Optional | Default |
+|-----------|-----------------------------------|-----------------|---------|--------|
+| routes    | The routing stack information of router | Array             |         | -      |
+| params    | Routing parameter                        | Object            |         | -      |
+| separator | Custom separator                      | String or Element |         | '/'    |
+| linkRender | Custom link function，and react-router configuration | Function(href, name) |         | -    |
+| nameRender | Custom link function，and react-router configuration | Function(name) |         | -    |