From f28ba8119cc896f4c80b64a7079bafa1fccb38b0 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Sat, 2 Jul 2016 14:34:29 +0300
Subject: [PATCH 01/24] Breadcrumb component

---
 src/collections/Breadcrumb/Breadcrumb.js      | 45 +++++++++++++++++++
 src/index.js                                  |  2 +
 .../collections/Breadcrumb/Breadcrumb-test.js | 15 +++++++
 3 files changed, 62 insertions(+)
 create mode 100644 src/collections/Breadcrumb/Breadcrumb.js
 create mode 100644 test/specs/collections/Breadcrumb/Breadcrumb-test.js

diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
new file mode 100644
index 0000000000..cc77d0067d
--- /dev/null
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -0,0 +1,45 @@
+import cx from 'classnames'
+import React, { PropTypes } from 'react'
+import META from 'src/utils/Meta'
+import { getUnhandledProps } from '../../utils/propUtils'
+import * as sui from '../../utils/semanticUtils'
+
+function Breadcrumb(props) {
+  const {
+    children,
+    size,
+  } = props
+
+  const classes = cx(
+    'ui',
+    size,
+    'breadcrumb'
+  )
+
+  const rest = getUnhandledProps(Breadcrumb, props)
+
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+Breadcrumb._meta = {
+  library: META.library.semanticUI,
+  name: 'Breadcrumb',
+  type: META.type.collection,
+  props: {
+    size: sui.sizes,
+  },
+}
+
+Breadcrumb.propTypes = {
+  /** Primary content of the Container */
+  children: PropTypes.node,
+
+  /** Size of breadcrumb */
+  size: PropTypes.oneOf(Breadcrumb._meta.props.size),
+}
+
+export default Breadcrumb
diff --git a/src/index.js b/src/index.js
index 09147b3ee2..e192ff8116 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,6 +11,8 @@ export Select from './addons/Select/Select'
 // Collections
 // ----------------------------------------
 
+export Breadcrumb from './collections/Breadcrumb/Breadcrumb'
+
 import _Form from './collections/Form/Form'
 export { _Form as Form }
 export const Field = deprecateComponent('Field', 'Use "Form.Field" instead.', _Form.Field)
diff --git a/test/specs/collections/Breadcrumb/Breadcrumb-test.js b/test/specs/collections/Breadcrumb/Breadcrumb-test.js
new file mode 100644
index 0000000000..f8ddab0fd6
--- /dev/null
+++ b/test/specs/collections/Breadcrumb/Breadcrumb-test.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+import Breadcrumb from 'src/collections/Breadcrumb/Breadcrumb'
+import * as common from 'test/specs/commonTests'
+
+describe('Breadcrumb', () => {
+  common.isConformant(Breadcrumb)
+  common.hasUIClassName(Breadcrumb)
+  common.rendersChildren(Breadcrumb)
+
+  it('renders a <div /> element', () => {
+    shallow(<Breadcrumb />)
+      .should.have.tagName('div')
+  })
+})

From cc969f1ade317f0d13b0013e29c4bdcb17bccc3c Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Tue, 5 Jul 2016 12:29:10 +0300
Subject: [PATCH 02/24] Breadcrumb.Section #321

---
 .../Breadcrumb/BreadcrumbSection.js           | 95 +++++++++++++++++++
 .../Breadcrumb/BreadcrumbSection-test.js      | 84 ++++++++++++++++
 2 files changed, 179 insertions(+)
 create mode 100644 src/collections/Breadcrumb/BreadcrumbSection.js
 create mode 100644 test/specs/collections/Breadcrumb/BreadcrumbSection-test.js

diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
new file mode 100644
index 0000000000..0258a9cc1f
--- /dev/null
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -0,0 +1,95 @@
+import * as _ from 'lodash'
+import React, { PropTypes } from 'react'
+import cx from 'classnames'
+import META from '../../utils/Meta'
+
+/**
+ * A section sub-component for Breadcrumb component.
+ *
+ * @see Breadcrumb
+ */
+function BreadcrumbSection(props) {
+  const {
+    active, children, className, link, href, onClick, ...rest,
+  } = props
+
+  /**
+   * Handles onClick event. If onClick is not defined, does nothing.
+   * */
+  const handleClick = (e) => {
+    if (!_.isUndefined(e)) e.preventDefault()
+    if (!_.isFunction(onClick)) return
+
+    onClick()
+  }
+
+  const classes = cx(
+    active && 'active',
+    className,
+    'section',
+  )
+
+  // Handle link and onClick props.
+  //
+  // <Breadcrumb.Section link>Home</Breadcrumb.Section>
+  // <Breadcrumb.Section onClick={this.handleClick}>Home</Breadcrumb.Section>
+
+  if (link || onClick) {
+    return (
+      <a {...rest} className={classes} href='#' onClick={handleClick}>
+        {children}
+      </a>
+    )
+  }
+
+  // Handle href prop.
+  //
+  // <Breadcrumb.Section href='http://google.com'>Home</Breadcrumb.Section>
+
+  if (href) {
+    return (
+      <a {...rest} className={classes} href={href} onClick={handleClick}>
+        {children}
+      </a>
+    )
+  }
+
+  // Default variant.
+  //
+  // <Breadcrumb.Section>Home</Breadcrumb.Section>
+
+  return (
+    <div {...rest} className={classes} onClick={handleClick}>
+      {children}
+    </div>
+  )
+}
+
+BreadcrumbSection._meta = {
+  library: META.library.semanticUI,
+  name: 'BreadcrumbSection',
+  type: META.type.collection,
+  parent: 'Breadcrumb',
+}
+
+BreadcrumbSection.propTypes = {
+  /** Optional props that adds class active */
+  active: PropTypes.bool,
+
+  /** Primary content of the Breadcrumb.Section */
+  children: PropTypes.node,
+
+  /** Additional classes added to the element. */
+  className: PropTypes.string,
+
+  /** Makes element link (<a>) instead of text (<div>) */
+  link: PropTypes.bool,
+
+  /** Makes element link (<a>) instead of text (<div>) and adds href attribute. */
+  href: PropTypes.string,
+
+  /** Makes element link (<a>) instead of text (<div>) and adds onClick event. */
+  onClick: PropTypes.func,
+}
+
+export default BreadcrumbSection
diff --git a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
new file mode 100644
index 0000000000..c1bdf91810
--- /dev/null
+++ b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
@@ -0,0 +1,84 @@
+import React from 'react'
+import Breadcrumb from 'src/collections/Breadcrumb/Breadcrumb'
+import * as common from 'test/specs/commonTests'
+import sandbox from 'test/utils/Sandbox-util'
+
+describe('BreadcrumbSection', () => {
+  common.isConformant(Breadcrumb.Section)
+  common.rendersChildren(Breadcrumb.Section)
+
+  describe('active', () => {
+    it('is not by default', () => {
+      const section = shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
+
+      section.should.not.have.className('active')
+      section.should.have.tagName('div')
+    })
+
+    it('is should be active by prop', () => {
+      const section = shallow(<Breadcrumb.Section active>Home</Breadcrumb.Section>)
+
+      section.should.have.className('active')
+      section.should.have.tagName('div')
+    })
+  })
+
+  describe('link prop', () => {
+    it('is not by default', () => {
+      shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
+        .should.have.tagName('div')
+    })
+
+    it('is should be active by prop', () => {
+      const section = shallow(<Breadcrumb.Section link>Home</Breadcrumb.Section>)
+
+      section.should.have.tagName('a')
+      section.should.have.attr('href').and.equal('#')
+    })
+  })
+
+  describe('href prop', () => {
+    it('is not by default', () => {
+      const section = shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
+
+      section.should.have.tagName('div')
+      section.should.not.have.attr('href')
+    })
+
+    it('is should have attr when prop', () => {
+      const section = shallow(<Breadcrumb.Section href='http://google.com'>Home</Breadcrumb.Section>)
+
+      section.should.have.tagName('a')
+      section.should.have.attr('href').and.equal('http://google.com')
+    })
+  })
+
+  describe('onclick prop', () => {
+    it('is not by default', () => {
+      shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
+        .should.have.tagName('div')
+    })
+
+    it('is should run click by prop', () => {
+      const handleClick = sandbox.spy()
+      const wrapper = shallow(<Breadcrumb.Section onClick={handleClick}>Home</Breadcrumb.Section>)
+
+      wrapper.should.have.tagName('a')
+      wrapper.should.have.attr('href').and.equal('#')
+
+      wrapper.simulate('click')
+      handleClick.should.have.been.calledOnce()
+    })
+
+    it('is shouldn not run click by prop, if prop not function', () => {
+      const handleClick = sandbox.spy()
+      const wrapper = shallow(<Breadcrumb.Section onClick='test'>Home</Breadcrumb.Section>)
+
+      wrapper.should.have.tagName('a')
+      wrapper.should.have.attr('href').and.equal('#')
+
+      wrapper.simulate('click')
+      handleClick.should.have.callCount(0)
+    })
+  })
+})

From a87bb2e5edfabaf151f7ea062743431ad30fb17e Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Tue, 5 Jul 2016 12:30:47 +0300
Subject: [PATCH 03/24] Breadcrumb.Section #321

---
 src/collections/Breadcrumb/Breadcrumb.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index cc77d0067d..c53423d2a4 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'
 import META from 'src/utils/Meta'
 import { getUnhandledProps } from '../../utils/propUtils'
 import * as sui from '../../utils/semanticUtils'
+import BreadcrumbSection from './BreadcrumbSection'
 
 function Breadcrumb(props) {
   const {
@@ -35,11 +36,13 @@ Breadcrumb._meta = {
 }
 
 Breadcrumb.propTypes = {
-  /** Primary content of the Container */
+  /** Primary content of the Breadcrumb */
   children: PropTypes.node,
 
-  /** Size of breadcrumb */
+  /** Size of Breadcrumb */
   size: PropTypes.oneOf(Breadcrumb._meta.props.size),
 }
 
+Breadcrumb.Section = BreadcrumbSection
+
 export default Breadcrumb

From 3893a035db8ea92ac892e563a5715944c0cf3c92 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Tue, 5 Jul 2016 22:38:02 +0300
Subject: [PATCH 04/24] README.md update #321

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 16b9addd88..53cfd5ce38 100644
--- a/README.md
+++ b/README.md
@@ -121,7 +121,7 @@ Be sure to check out the above migrations before embarking on a new component.
 
 |    Elements     |   Collections   |      Views      |     Modules     |     Behaviors      |
 |-----------------|-----------------|-----------------|-----------------|--------------------|
-| x Button        | _ Breadcrumb    | _ Advertisement | x Accordion     | x Form Validation  |
+| x Button        | x Breadcrumb    | _ Advertisement | x Accordion     | x Form Validation  |
 | x Container     | x Form          | _ Card          | x Checkbox      | *API (NA)*         |
 | x Divider       | x Grid          | _ Comment       | _ Dimmer        | *Visibility (NA)*  |
 | _ Flag          | x Menu          | _ Feed          | x Dropdown      |                    |

From c01c4a6767ffaebf89bc733b6e4c8bee101d318c Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Tue, 5 Jul 2016 22:41:38 +0300
Subject: [PATCH 05/24] (refactor) Breadcrumb.Section #321

---
 .../Breadcrumb/BreadcrumbSection.js           | 23 ++++----
 .../Breadcrumb/BreadcrumbSection-test.js      | 54 ++++---------------
 2 files changed, 22 insertions(+), 55 deletions(-)

diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index 0258a9cc1f..460acbe339 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -1,7 +1,7 @@
-import * as _ from 'lodash'
-import React, { PropTypes } from 'react'
+import React, {PropTypes} from 'react'
 import cx from 'classnames'
 import META from '../../utils/Meta'
+import {customPropTypes, useKeyOnly} from '../../utils/propUtils'
 
 /**
  * A section sub-component for Breadcrumb component.
@@ -17,14 +17,11 @@ function BreadcrumbSection(props) {
    * Handles onClick event. If onClick is not defined, does nothing.
    * */
   const handleClick = (e) => {
-    if (!_.isUndefined(e)) e.preventDefault()
-    if (!_.isFunction(onClick)) return
-
-    onClick()
+    if (onClick) onClick(e)
   }
 
   const classes = cx(
-    active && 'active',
+    useKeyOnly(active, 'active'),
     className,
     'section',
   )
@@ -36,7 +33,7 @@ function BreadcrumbSection(props) {
 
   if (link || onClick) {
     return (
-      <a {...rest} className={classes} href='#' onClick={handleClick}>
+      <a {...rest} className={classes} href='javascript:void(0)' onClick={handleClick}>
         {children}
       </a>
     )
@@ -83,10 +80,16 @@ BreadcrumbSection.propTypes = {
   className: PropTypes.string,
 
   /** Makes element link (<a>) instead of text (<div>) */
-  link: PropTypes.bool,
+  link: customPropTypes.all([
+    customPropTypes.mutuallyExclusive(['href']),
+    PropTypes.bool
+  ]),
 
   /** Makes element link (<a>) instead of text (<div>) and adds href attribute. */
-  href: PropTypes.string,
+  href: customPropTypes.all([
+    customPropTypes.mutuallyExclusive(['link']),
+    PropTypes.string
+  ]),
 
   /** Makes element link (<a>) instead of text (<div>) and adds onClick event. */
   onClick: PropTypes.func,
diff --git a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
index c1bdf91810..b1d5931b73 100644
--- a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
+++ b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
@@ -6,46 +6,26 @@ import sandbox from 'test/utils/Sandbox-util'
 describe('BreadcrumbSection', () => {
   common.isConformant(Breadcrumb.Section)
   common.rendersChildren(Breadcrumb.Section)
+  common.propValueOnlyToClassName(Breadcrumb.Section, 'active')
 
-  describe('active', () => {
-    it('is not by default', () => {
-      const section = shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
+  it('is div by default and does not have `href` attr', () => {
+    const section = shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
 
-      section.should.not.have.className('active')
-      section.should.have.tagName('div')
-    })
-
-    it('is should be active by prop', () => {
-      const section = shallow(<Breadcrumb.Section active>Home</Breadcrumb.Section>)
-
-      section.should.have.className('active')
-      section.should.have.tagName('div')
-    })
+    section.should.have.tagName('div')
+    section.should.not.have.attr('href')
   })
 
   describe('link prop', () => {
-    it('is not by default', () => {
-      shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
-        .should.have.tagName('div')
-    })
-
-    it('is should be active by prop', () => {
+    it('is should be `a` when has prop link', () => {
       const section = shallow(<Breadcrumb.Section link>Home</Breadcrumb.Section>)
 
       section.should.have.tagName('a')
-      section.should.have.attr('href').and.equal('#')
+      section.should.have.attr('href').and.equal('javascript:void(0)')
     })
   })
 
   describe('href prop', () => {
-    it('is not by default', () => {
-      const section = shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
-
-      section.should.have.tagName('div')
-      section.should.not.have.attr('href')
-    })
-
-    it('is should have attr when prop', () => {
+    it('is should have attr `href` when has prop', () => {
       const section = shallow(<Breadcrumb.Section href='http://google.com'>Home</Breadcrumb.Section>)
 
       section.should.have.tagName('a')
@@ -54,31 +34,15 @@ describe('BreadcrumbSection', () => {
   })
 
   describe('onclick prop', () => {
-    it('is not by default', () => {
-      shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
-        .should.have.tagName('div')
-    })
-
     it('is should run click by prop', () => {
       const handleClick = sandbox.spy()
       const wrapper = shallow(<Breadcrumb.Section onClick={handleClick}>Home</Breadcrumb.Section>)
 
       wrapper.should.have.tagName('a')
-      wrapper.should.have.attr('href').and.equal('#')
+      wrapper.should.have.attr('href').and.equal('javascript:void(0)')
 
       wrapper.simulate('click')
       handleClick.should.have.been.calledOnce()
     })
-
-    it('is shouldn not run click by prop, if prop not function', () => {
-      const handleClick = sandbox.spy()
-      const wrapper = shallow(<Breadcrumb.Section onClick='test'>Home</Breadcrumb.Section>)
-
-      wrapper.should.have.tagName('a')
-      wrapper.should.have.attr('href').and.equal('#')
-
-      wrapper.simulate('click')
-      handleClick.should.have.callCount(0)
-    })
   })
 })

From 23b3df45aeef0967394f3cf120382085fe7eb187 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Tue, 5 Jul 2016 23:18:11 +0300
Subject: [PATCH 06/24] (fix) Breadcrumb.Section test #321

---
 src/collections/Breadcrumb/BreadcrumbSection.js  |  8 ++++----
 .../Breadcrumb/BreadcrumbSection-test.js         | 16 ++++++++--------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index 460acbe339..038758832b 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -1,7 +1,7 @@
-import React, {PropTypes} from 'react'
+import React, { PropTypes } from 'react'
 import cx from 'classnames'
 import META from '../../utils/Meta'
-import {customPropTypes, useKeyOnly} from '../../utils/propUtils'
+import { customPropTypes, useKeyOnly } from '../../utils/propUtils'
 
 /**
  * A section sub-component for Breadcrumb component.
@@ -82,13 +82,13 @@ BreadcrumbSection.propTypes = {
   /** Makes element link (<a>) instead of text (<div>) */
   link: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['href']),
-    PropTypes.bool
+    PropTypes.bool,
   ]),
 
   /** Makes element link (<a>) instead of text (<div>) and adds href attribute. */
   href: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['link']),
-    PropTypes.string
+    PropTypes.string,
   ]),
 
   /** Makes element link (<a>) instead of text (<div>) and adds onClick event. */
diff --git a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
index b1d5931b73..2d3632bf53 100644
--- a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
+++ b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
@@ -1,15 +1,15 @@
 import React from 'react'
-import Breadcrumb from 'src/collections/Breadcrumb/Breadcrumb'
+import BreadcrumbSection from 'src/collections/Breadcrumb/BreadcrumbSection'
 import * as common from 'test/specs/commonTests'
 import sandbox from 'test/utils/Sandbox-util'
 
 describe('BreadcrumbSection', () => {
-  common.isConformant(Breadcrumb.Section)
-  common.rendersChildren(Breadcrumb.Section)
-  common.propValueOnlyToClassName(Breadcrumb.Section, 'active')
+  common.isConformant(BreadcrumbSection)
+  common.rendersChildren(BreadcrumbSection)
+  common.propKeyOnlyToClassName(BreadcrumbSection, 'active')
 
   it('is div by default and does not have `href` attr', () => {
-    const section = shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
+    const section = shallow(<BreadcrumbSection>Home</BreadcrumbSection>)
 
     section.should.have.tagName('div')
     section.should.not.have.attr('href')
@@ -17,7 +17,7 @@ describe('BreadcrumbSection', () => {
 
   describe('link prop', () => {
     it('is should be `a` when has prop link', () => {
-      const section = shallow(<Breadcrumb.Section link>Home</Breadcrumb.Section>)
+      const section = shallow(<BreadcrumbSection link>Home</BreadcrumbSection>)
 
       section.should.have.tagName('a')
       section.should.have.attr('href').and.equal('javascript:void(0)')
@@ -26,7 +26,7 @@ describe('BreadcrumbSection', () => {
 
   describe('href prop', () => {
     it('is should have attr `href` when has prop', () => {
-      const section = shallow(<Breadcrumb.Section href='http://google.com'>Home</Breadcrumb.Section>)
+      const section = shallow(<BreadcrumbSection href='http://google.com'>Home</BreadcrumbSection>)
 
       section.should.have.tagName('a')
       section.should.have.attr('href').and.equal('http://google.com')
@@ -36,7 +36,7 @@ describe('BreadcrumbSection', () => {
   describe('onclick prop', () => {
     it('is should run click by prop', () => {
       const handleClick = sandbox.spy()
-      const wrapper = shallow(<Breadcrumb.Section onClick={handleClick}>Home</Breadcrumb.Section>)
+      const wrapper = shallow(<BreadcrumbSection onClick={handleClick}>Home</BreadcrumbSection>)
 
       wrapper.should.have.tagName('a')
       wrapper.should.have.attr('href').and.equal('javascript:void(0)')

From 80a28034e4c632a6612b1ce2ffb077ce32925da7 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Tue, 5 Jul 2016 23:21:33 +0300
Subject: [PATCH 07/24] (fix) Breadcrumb.Section #321

---
 src/collections/Breadcrumb/BreadcrumbSection.js            | 2 +-
 .../specs/collections/Breadcrumb/BreadcrumbSection-test.js | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index 038758832b..90fc6fc705 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -33,7 +33,7 @@ function BreadcrumbSection(props) {
 
   if (link || onClick) {
     return (
-      <a {...rest} className={classes} href='javascript:void(0)' onClick={handleClick}>
+      <a {...rest} className={classes} onClick={handleClick}>
         {children}
       </a>
     )
diff --git a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
index 2d3632bf53..81dfb45f66 100644
--- a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
+++ b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
@@ -17,10 +17,8 @@ describe('BreadcrumbSection', () => {
 
   describe('link prop', () => {
     it('is should be `a` when has prop link', () => {
-      const section = shallow(<BreadcrumbSection link>Home</BreadcrumbSection>)
-
-      section.should.have.tagName('a')
-      section.should.have.attr('href').and.equal('javascript:void(0)')
+      shallow(<BreadcrumbSection link>Home</BreadcrumbSection>)
+        .should.have.tagName('a')
     })
   })
 
@@ -39,7 +37,6 @@ describe('BreadcrumbSection', () => {
       const wrapper = shallow(<BreadcrumbSection onClick={handleClick}>Home</BreadcrumbSection>)
 
       wrapper.should.have.tagName('a')
-      wrapper.should.have.attr('href').and.equal('javascript:void(0)')
 
       wrapper.simulate('click')
       handleClick.should.have.been.calledOnce()

From f3864aefcb288cf3e3a25f6f8468916dc5c8a2a9 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Wed, 6 Jul 2016 10:47:17 +0300
Subject: [PATCH 08/24] (fix) Breadcrumb.Section #321

---
 .../Breadcrumb/BreadcrumbSection.js           | 28 ++++---------------
 .../Breadcrumb/BreadcrumbSection-test.js      | 19 +++++++------
 2 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index 90fc6fc705..cf40c1c96e 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -5,17 +5,12 @@ import { customPropTypes, useKeyOnly } from '../../utils/propUtils'
 
 /**
  * A section sub-component for Breadcrumb component.
- *
- * @see Breadcrumb
  */
 function BreadcrumbSection(props) {
   const {
     active, children, className, link, href, onClick, ...rest,
   } = props
 
-  /**
-   * Handles onClick event. If onClick is not defined, does nothing.
-   * */
   const handleClick = (e) => {
     if (onClick) onClick(e)
   }
@@ -26,11 +21,6 @@ function BreadcrumbSection(props) {
     'section',
   )
 
-  // Handle link and onClick props.
-  //
-  // <Breadcrumb.Section link>Home</Breadcrumb.Section>
-  // <Breadcrumb.Section onClick={this.handleClick}>Home</Breadcrumb.Section>
-
   if (link || onClick) {
     return (
       <a {...rest} className={classes} onClick={handleClick}>
@@ -39,10 +29,6 @@ function BreadcrumbSection(props) {
     )
   }
 
-  // Handle href prop.
-  //
-  // <Breadcrumb.Section href='http://google.com'>Home</Breadcrumb.Section>
-
   if (href) {
     return (
       <a {...rest} className={classes} href={href} onClick={handleClick}>
@@ -51,10 +37,6 @@ function BreadcrumbSection(props) {
     )
   }
 
-  // Default variant.
-  //
-  // <Breadcrumb.Section>Home</Breadcrumb.Section>
-
   return (
     <div {...rest} className={classes} onClick={handleClick}>
       {children}
@@ -70,28 +52,28 @@ BreadcrumbSection._meta = {
 }
 
 BreadcrumbSection.propTypes = {
-  /** Optional props that adds class active */
+  /** Style as the currently active section. */
   active: PropTypes.bool,
 
-  /** Primary content of the Breadcrumb.Section */
+  /** Primary content of the Breadcrumb.Section. */
   children: PropTypes.node,
 
   /** Additional classes added to the element. */
   className: PropTypes.string,
 
-  /** Makes element link (<a>) instead of text (<div>) */
+  /** Render as an `a` tag instead of a `div`. */
   link: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['href']),
     PropTypes.bool,
   ]),
 
-  /** Makes element link (<a>) instead of text (<div>) and adds href attribute. */
+  /** Render as an `a` tag instead of a `div` and adds the href attribute. */
   href: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['link']),
     PropTypes.string,
   ]),
 
-  /** Makes element link (<a>) instead of text (<div>) and adds onClick event. */
+  /** Render as an `a` tag instead of a `div` and called with event on Section click. */
   onClick: PropTypes.func,
 }
 
diff --git a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
index 81dfb45f66..32c66bb2c6 100644
--- a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
+++ b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
@@ -8,11 +8,9 @@ describe('BreadcrumbSection', () => {
   common.rendersChildren(BreadcrumbSection)
   common.propKeyOnlyToClassName(BreadcrumbSection, 'active')
 
-  it('is div by default and does not have `href` attr', () => {
-    const section = shallow(<BreadcrumbSection>Home</BreadcrumbSection>)
-
-    section.should.have.tagName('div')
-    section.should.not.have.attr('href')
+  it('renders as a div by default', () => {
+    shallow(<BreadcrumbSection>Home</BreadcrumbSection>)
+      .should.have.tagName('div')
   })
 
   describe('link prop', () => {
@@ -23,7 +21,12 @@ describe('BreadcrumbSection', () => {
   })
 
   describe('href prop', () => {
-    it('is should have attr `href` when has prop', () => {
+    it('is not present by default', () => {
+      shallow(<BreadcrumbSection>Home</BreadcrumbSection>)
+        .should.not.have.attr('href')
+    })
+
+    it('should have attr `href` when has prop', () => {
       const section = shallow(<BreadcrumbSection href='http://google.com'>Home</BreadcrumbSection>)
 
       section.should.have.tagName('a')
@@ -31,8 +34,8 @@ describe('BreadcrumbSection', () => {
     })
   })
 
-  describe('onclick prop', () => {
-    it('is should run click by prop', () => {
+  describe('onClick prop', () => {
+    it('should run click by prop', () => {
       const handleClick = sandbox.spy()
       const wrapper = shallow(<BreadcrumbSection onClick={handleClick}>Home</BreadcrumbSection>)
 

From c2cbba0fb525ab8d67ffee71587aaa46e5989e23 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Wed, 6 Jul 2016 11:26:57 +0300
Subject: [PATCH 09/24] (feat) Breadcrumb.Section #321

---
 src/collections/Breadcrumb/Breadcrumb.js      |  2 +
 .../Breadcrumb/BreadcrumbDivider.js           | 55 +++++++++++++++++++
 .../Breadcrumb/BreadcrumbDivider-test.js      | 30 ++++++++++
 3 files changed, 87 insertions(+)
 create mode 100644 src/collections/Breadcrumb/BreadcrumbDivider.js
 create mode 100644 test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js

diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index c53423d2a4..f90e161cf9 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'
 import META from 'src/utils/Meta'
 import { getUnhandledProps } from '../../utils/propUtils'
 import * as sui from '../../utils/semanticUtils'
+import BreadcrumbDivider from './BreadcrumbDivider'
 import BreadcrumbSection from './BreadcrumbSection'
 
 function Breadcrumb(props) {
@@ -43,6 +44,7 @@ Breadcrumb.propTypes = {
   size: PropTypes.oneOf(Breadcrumb._meta.props.size),
 }
 
+Breadcrumb.Divider = BreadcrumbDivider
 Breadcrumb.Section = BreadcrumbSection
 
 export default Breadcrumb
diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js
new file mode 100644
index 0000000000..5d9c3018ae
--- /dev/null
+++ b/src/collections/Breadcrumb/BreadcrumbDivider.js
@@ -0,0 +1,55 @@
+import React, {PropTypes} from "react";
+import cx from "classnames";
+import META from "../../utils/Meta";
+import {customPropTypes} from "../../utils/propUtils";
+import Icon from "src/elements/Icon/Icon";
+
+/**
+ * A divider sub-component for Breadcrumb component.
+ */
+function BreadcrumbDivider(props) {
+  const {
+    children, icon, className, ...rest,
+  } = props
+
+  const classes = cx(
+    className,
+    'divider',
+  )
+
+  if (icon) {
+    return <Icon className='divider' name={icon}/>
+  }
+
+  if (children) {
+    return <div className={classes} {...rest}>{children}</div>
+  }
+
+  return <div className={classes} {...rest}>/</div>
+}
+
+BreadcrumbDivider._meta = {
+  library: META.library.semanticUI,
+  name: 'BreadcrumbDivider',
+  type: META.type.collection,
+  parent: 'Breadcrumb',
+}
+
+BreadcrumbDivider.propTypes = {
+  /** Primary content of the Breadcrumb.Divider. */
+  children: customPropTypes.all([
+    customPropTypes.mutuallyExclusive(['icon']),
+    PropTypes.node,
+  ]),
+
+  /** Render as an `Icon` component with `divider` class instead of a `div`. */
+  icon: customPropTypes.all([
+    customPropTypes.mutuallyExclusive(['children']),
+    PropTypes.string,
+  ]),
+
+  /** Additional classes added to the element. */
+  className: PropTypes.string,
+}
+
+export default BreadcrumbDivider
diff --git a/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js b/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js
new file mode 100644
index 0000000000..bce32627a2
--- /dev/null
+++ b/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import BreadcrumbDivider from 'src/collections/Breadcrumb/BreadcrumbDivider'
+import * as common from 'test/specs/commonTests'
+
+describe('BreadcrumbDivider', () => {
+  common.isConformant(BreadcrumbDivider)
+  common.rendersChildren(BreadcrumbDivider)
+
+  it('renders as a div by default', () => {
+    shallow(<BreadcrumbDivider />)
+      .should.have.tagName('div')
+  })
+
+  describe('icon prop', () => {
+    it('is not present by default', () => {
+      shallow(<BreadcrumbDivider />)
+        .should.not.have.tagName('i')
+    })
+
+    it('should rendered as i when has prop', () => {
+      shallow(<BreadcrumbDivider icon='right mangle' />)
+        .should.have.tagName('i')
+    })
+
+    it('should have class `divider`', () => {
+      shallow(<BreadcrumbDivider icon='right mangle' />)
+        .should.have.className('divider')
+    })
+  })
+})

From ffc09a5a720a69daf91d65894fe4bd6690548ffd Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Wed, 6 Jul 2016 11:33:30 +0300
Subject: [PATCH 10/24] (fix) Breadcrumb.Divider #321

---
 src/collections/Breadcrumb/BreadcrumbDivider.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js
index 5d9c3018ae..8382979055 100644
--- a/src/collections/Breadcrumb/BreadcrumbDivider.js
+++ b/src/collections/Breadcrumb/BreadcrumbDivider.js
@@ -1,8 +1,8 @@
-import React, {PropTypes} from "react";
-import cx from "classnames";
-import META from "../../utils/Meta";
-import {customPropTypes} from "../../utils/propUtils";
-import Icon from "src/elements/Icon/Icon";
+import React, { PropTypes } from 'react'
+import cx from 'classnames'
+import META from '../../utils/Meta'
+import { customPropTypes } from '../../utils/propUtils'
+import Icon from 'src/elements/Icon/Icon'
 
 /**
  * A divider sub-component for Breadcrumb component.
@@ -18,7 +18,7 @@ function BreadcrumbDivider(props) {
   )
 
   if (icon) {
-    return <Icon className='divider' name={icon}/>
+    return <Icon className='divider' name={icon} />
   }
 
   if (children) {

From 3d889885c21041891bdaa6b7b47945dab6cccce0 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Wed, 6 Jul 2016 18:39:04 +0300
Subject: [PATCH 11/24] (feat) Breadcrumb #321

---
 src/collections/Breadcrumb/Breadcrumb.js | 67 +++++++++++++++++++++---
 1 file changed, 61 insertions(+), 6 deletions(-)

diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index f90e161cf9..e4828b686d 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -1,15 +1,17 @@
 import cx from 'classnames'
 import React, { PropTypes } from 'react'
 import META from 'src/utils/Meta'
-import { getUnhandledProps } from '../../utils/propUtils'
+import { customPropTypes } from '../../utils/propUtils'
 import * as sui from '../../utils/semanticUtils'
 import BreadcrumbDivider from './BreadcrumbDivider'
 import BreadcrumbSection from './BreadcrumbSection'
 
+/**
+ * A breadcrumb is used to show hierarchy between content.
+ */
 function Breadcrumb(props) {
   const {
-    children,
-    size,
+    children, divider, icon, size, sections, ...rest,
   } = props
 
   const classes = cx(
@@ -18,11 +20,30 @@ function Breadcrumb(props) {
     'breadcrumb'
   )
 
-  const rest = getUnhandledProps(Breadcrumb, props)
+  if (!sections) {
+    return <div className={classes} {...rest}>{children}</div>
+  }
+
+  let dividerJSX = <Breadcrumb.Divider />
+
+  if (divider) {
+    dividerJSX = <Breadcrumb.Divider>{divider}</Breadcrumb.Divider>
+  }
+
+  if (icon) {
+    dividerJSX = <Breadcrumb.Divider icon={icon} />
+  }
 
   return (
     <div className={classes} {...rest}>
-      {children}
+      {sections.map((section, index) => {
+        const isLast = index === (sections.length - 1)
+
+        return [
+          <Breadcrumb.Section {...section}>{section.text}</Breadcrumb.Section>,
+          isLast ? null : dividerJSX,
+        ]
+      })}
     </div>
   )
 }
@@ -38,7 +59,41 @@ Breadcrumb._meta = {
 
 Breadcrumb.propTypes = {
   /** Primary content of the Breadcrumb */
-  children: PropTypes.node,
+  children: customPropTypes.all([
+    customPropTypes.mutuallyExclusive(['sections', 'icon', 'divider']),
+    PropTypes.node,
+  ]),
+
+  /** Primary content of the Breadcrumb.Divider. */
+  divider: customPropTypes.all([
+    customPropTypes.mutuallyExclusive(['icon']),
+    PropTypes.string,
+  ]),
+
+  /** Render as an `Icon` component with `divider` class instead of a `div` in Breadcrumb.Divider. */
+  icon: customPropTypes.all([
+    customPropTypes.mutuallyExclusive(['divider']),
+    PropTypes.string,
+  ]),
+
+  /** Array of props for Breadcrumb.Section. */
+  sections: customPropTypes.all([
+    customPropTypes.mutuallyExclusive(['children']),
+    customPropTypes.all([
+      React.PropTypes.arrayOf(React.PropTypes.shape({
+        text: React.PropTypes.string.isRequired,
+        link: customPropTypes.all([
+          customPropTypes.mutuallyExclusive(['href']),
+          PropTypes.bool,
+        ]),
+        href: customPropTypes.all([
+          customPropTypes.mutuallyExclusive(['link']),
+          PropTypes.string,
+        ]),
+        onClick: PropTypes.func,
+      })),
+    ]),
+  ]),
 
   /** Size of Breadcrumb */
   size: PropTypes.oneOf(Breadcrumb._meta.props.size),

From c91d0d99749730a085b2dc2535a700f1b3143b94 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Wed, 6 Jul 2016 20:15:56 +0300
Subject: [PATCH 12/24] (fix) Breadcrumb.Section test #321

---
 .../collections/Breadcrumb/BreadcrumbSection-test.js   | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
index 32c66bb2c6..7b6b83f11e 100644
--- a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
+++ b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
@@ -35,7 +35,15 @@ describe('BreadcrumbSection', () => {
   })
 
   describe('onClick prop', () => {
-    it('should run click by prop', () => {
+    it('can be omitted', () => {
+      const handleClick = sandbox.spy()
+      shallow(<BreadcrumbSection>Home</BreadcrumbSection>)
+        .simulate('click')
+
+      handleClick.should.not.have.been.calledOnce()
+    })
+
+    it('is called with (event) on click', () => {
       const handleClick = sandbox.spy()
       const wrapper = shallow(<BreadcrumbSection onClick={handleClick}>Home</BreadcrumbSection>)
 

From 6fa9e5aafb2ccc79c65294ee7baa86996fdbab40 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Wed, 6 Jul 2016 23:40:21 +0300
Subject: [PATCH 13/24] (fix) Breadcrumb.Section test #321

---
 .../specs/collections/Breadcrumb/BreadcrumbSection-test.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
index 7b6b83f11e..4c656753f6 100644
--- a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
+++ b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
@@ -36,11 +36,8 @@ describe('BreadcrumbSection', () => {
 
   describe('onClick prop', () => {
     it('can be omitted', () => {
-      const handleClick = sandbox.spy()
-      shallow(<BreadcrumbSection>Home</BreadcrumbSection>)
-        .simulate('click')
-
-      handleClick.should.not.have.been.calledOnce()
+      const click = () => mount(<BreadcrumbSection>Home</BreadcrumbSection>).simulate('click')
+      expect(click).to.not.throw()
     })
 
     it('is called with (event) on click', () => {

From 6937755d50d7bd162eae090fd2225cf7ea959f00 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Wed, 6 Jul 2016 23:47:13 +0300
Subject: [PATCH 14/24] (fix) Breadcrumb #321

---
 src/collections/Breadcrumb/Breadcrumb.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index e4828b686d..ce859a0152 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import cx from 'classnames'
 import React, { PropTypes } from 'react'
 import META from 'src/utils/Meta'
@@ -53,7 +54,7 @@ Breadcrumb._meta = {
   name: 'Breadcrumb',
   type: META.type.collection,
   props: {
-    size: sui.sizes,
+    size: _.without(sui.sizes, 'medium'),
   },
 }
 

From 77baebbd166e581bec5defc1efd39f2ce858cd78 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Thu, 7 Jul 2016 18:23:02 +0300
Subject: [PATCH 15/24] (feat) Breadcrumb #321

---
 src/collections/Breadcrumb/Breadcrumb.js      | 53 +++++++------------
 .../Breadcrumb/BreadcrumbDivider.js           | 12 ++---
 .../collections/Breadcrumb/Breadcrumb-test.js | 12 ++++-
 .../Breadcrumb/BreadcrumbSection-test.js      |  7 +--
 4 files changed, 39 insertions(+), 45 deletions(-)

diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index ce859a0152..fce2f41b98 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -25,28 +25,23 @@ function Breadcrumb(props) {
     return <div className={classes} {...rest}>{children}</div>
   }
 
-  let dividerJSX = <Breadcrumb.Divider />
+  const dividerJSX = <Breadcrumb.Divider icon={icon}>{divider}</Breadcrumb.Divider>
+  const sectionsJSX = []
 
-  if (divider) {
-    dividerJSX = <Breadcrumb.Divider>{divider}</Breadcrumb.Divider>
-  }
+  sections.forEach(({ text, ...restSection }, index) => {
+    const key = `${text}-${index}`
+    const dividerKey = `$divider-${index}`
 
-  if (icon) {
-    dividerJSX = <Breadcrumb.Divider icon={icon} />
-  }
+    sectionsJSX.push(
+      <Breadcrumb.Section {...restSection} key={key}>{text}</Breadcrumb.Section>
+    )
 
-  return (
-    <div className={classes} {...rest}>
-      {sections.map((section, index) => {
-        const isLast = index === (sections.length - 1)
-
-        return [
-          <Breadcrumb.Section {...section}>{section.text}</Breadcrumb.Section>,
-          isLast ? null : dividerJSX,
-        ]
-      })}
-    </div>
-  )
+    if (index !== sections.length - 1) {
+      sectionsJSX.push(React.cloneElement(dividerJSX, { key: dividerKey }))
+    }
+  })
+
+  return <div className={classes} {...rest}>{sectionsJSX}</div>
 }
 
 Breadcrumb._meta = {
@@ -65,13 +60,14 @@ Breadcrumb.propTypes = {
     PropTypes.node,
   ]),
 
-  /** Primary content of the Breadcrumb.Divider. */
+  /** For use with the sections prop. Primary content of the Breadcrumb.Divider. */
   divider: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['icon']),
     PropTypes.string,
   ]),
 
-  /** Render as an `Icon` component with `divider` class instead of a `div` in Breadcrumb.Divider. */
+  /** For use with the sections prop. Render as an `Icon` component with `divider` class instead of a `div` in
+   *  Breadcrumb.Divider. */
   icon: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['divider']),
     PropTypes.string,
@@ -80,20 +76,7 @@ Breadcrumb.propTypes = {
   /** Array of props for Breadcrumb.Section. */
   sections: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['children']),
-    customPropTypes.all([
-      React.PropTypes.arrayOf(React.PropTypes.shape({
-        text: React.PropTypes.string.isRequired,
-        link: customPropTypes.all([
-          customPropTypes.mutuallyExclusive(['href']),
-          PropTypes.bool,
-        ]),
-        href: customPropTypes.all([
-          customPropTypes.mutuallyExclusive(['link']),
-          PropTypes.string,
-        ]),
-        onClick: PropTypes.func,
-      })),
-    ]),
+    React.PropTypes.array,
   ]),
 
   /** Size of Breadcrumb */
diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js
index 8382979055..51a08e01da 100644
--- a/src/collections/Breadcrumb/BreadcrumbDivider.js
+++ b/src/collections/Breadcrumb/BreadcrumbDivider.js
@@ -18,14 +18,10 @@ function BreadcrumbDivider(props) {
   )
 
   if (icon) {
-    return <Icon className='divider' name={icon} />
+    return <Icon className={classes} name={icon} {...rest} />
   }
 
-  if (children) {
-    return <div className={classes} {...rest}>{children}</div>
-  }
-
-  return <div className={classes} {...rest}>/</div>
+  return <div className={classes} {...rest}>{children}</div>
 }
 
 BreadcrumbDivider._meta = {
@@ -35,6 +31,10 @@ BreadcrumbDivider._meta = {
   parent: 'Breadcrumb',
 }
 
+BreadcrumbDivider.defaultProps = {
+  children: '/',
+}
+
 BreadcrumbDivider.propTypes = {
   /** Primary content of the Breadcrumb.Divider. */
   children: customPropTypes.all([
diff --git a/test/specs/collections/Breadcrumb/Breadcrumb-test.js b/test/specs/collections/Breadcrumb/Breadcrumb-test.js
index f8ddab0fd6..11604e7a9f 100644
--- a/test/specs/collections/Breadcrumb/Breadcrumb-test.js
+++ b/test/specs/collections/Breadcrumb/Breadcrumb-test.js
@@ -1,5 +1,4 @@
 import React from 'react'
-
 import Breadcrumb from 'src/collections/Breadcrumb/Breadcrumb'
 import * as common from 'test/specs/commonTests'
 
@@ -12,4 +11,15 @@ describe('Breadcrumb', () => {
     shallow(<Breadcrumb />)
       .should.have.tagName('div')
   })
+
+  it('renders children with `sections` prop', () => {
+    const sections = [
+      { text: 'Home', link: true },
+      { text: 'T-Shirt', href: 'google.com' },
+    ]
+    const wrapper = shallow(<Breadcrumb sections={sections} />)
+
+    wrapper.find('BreadcrumbDivider').should.have.length(1)
+    wrapper.find('BreadcrumbSection').should.have.length(2)
+  })
 })
diff --git a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
index 4c656753f6..ea1462cd22 100644
--- a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
+++ b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js
@@ -42,12 +42,13 @@ describe('BreadcrumbSection', () => {
 
     it('is called with (event) on click', () => {
       const handleClick = sandbox.spy()
-      const wrapper = shallow(<BreadcrumbSection onClick={handleClick}>Home</BreadcrumbSection>)
+      const section = mount(<BreadcrumbSection onClick={handleClick}>Home</BreadcrumbSection>)
 
-      wrapper.should.have.tagName('a')
+      section.should.have.tagName('a')
+      section.simulate('click')
 
-      wrapper.simulate('click')
       handleClick.should.have.been.calledOnce()
+      handleClick.should.have.been.calledWithMatch({})
     })
   })
 })

From 92c13d21efc2cb0197c7b8c089877f3255bfbc1f Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Thu, 7 Jul 2016 22:27:56 +0300
Subject: [PATCH 16/24] (fix) Breadcrumb key #321

---
 src/collections/Breadcrumb/Breadcrumb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index fce2f41b98..9aee4be7ef 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -30,7 +30,7 @@ function Breadcrumb(props) {
 
   sections.forEach(({ text, ...restSection }, index) => {
     const key = `${text}-${index}`
-    const dividerKey = `$divider-${index}`
+    const dividerKey = `${key}-divider`
 
     sectionsJSX.push(
       <Breadcrumb.Section {...restSection} key={key}>{text}</Breadcrumb.Section>

From a44fb59c929e820e3fcc2ed5ec313c5c7d3b29ba Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Thu, 7 Jul 2016 22:51:34 +0300
Subject: [PATCH 17/24] (feat) Breadcrumb test #321

---
 .../collections/Breadcrumb/Breadcrumb-test.js | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/test/specs/collections/Breadcrumb/Breadcrumb-test.js b/test/specs/collections/Breadcrumb/Breadcrumb-test.js
index 11604e7a9f..5481b3228e 100644
--- a/test/specs/collections/Breadcrumb/Breadcrumb-test.js
+++ b/test/specs/collections/Breadcrumb/Breadcrumb-test.js
@@ -12,14 +12,29 @@ describe('Breadcrumb', () => {
       .should.have.tagName('div')
   })
 
+  const sections = [
+    { text: 'Home', link: true },
+    { text: 'T-Shirt', href: 'google.com' },
+  ]
+
   it('renders children with `sections` prop', () => {
-    const sections = [
-      { text: 'Home', link: true },
-      { text: 'T-Shirt', href: 'google.com' },
-    ]
     const wrapper = shallow(<Breadcrumb sections={sections} />)
 
     wrapper.find('BreadcrumbDivider').should.have.length(1)
     wrapper.find('BreadcrumbSection').should.have.length(2)
   })
+
+  it('renders defined divider with `divider` prop', () => {
+    const wrapper = mount(<Breadcrumb sections={sections} divider='>' />)
+    const divider = wrapper.find('BreadcrumbDivider').first()
+
+    divider.text().should.to.equal('>')
+  })
+
+  it('renders divider as `Icon` with `icon` prop', () => {
+    const icon = mount(<Breadcrumb sections={sections} icon='right mangle' />).find('Icon')
+
+    icon.should.have.class('right mangle')
+    icon.should.have.tagName('i')
+  })
 })

From 82b04fa1fdba96c95dff03e2cf2dfb9170e2c28d Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Fri, 8 Jul 2016 10:53:00 +0300
Subject: [PATCH 18/24] (feat) Breadcrumb tests #321

---
 .../collections/Breadcrumb/Breadcrumb-test.js  | 13 +++----------
 .../Breadcrumb/BreadcrumbDivider-test.js       | 18 +-----------------
 2 files changed, 4 insertions(+), 27 deletions(-)

diff --git a/test/specs/collections/Breadcrumb/Breadcrumb-test.js b/test/specs/collections/Breadcrumb/Breadcrumb-test.js
index 5481b3228e..943095ad18 100644
--- a/test/specs/collections/Breadcrumb/Breadcrumb-test.js
+++ b/test/specs/collections/Breadcrumb/Breadcrumb-test.js
@@ -20,21 +20,14 @@ describe('Breadcrumb', () => {
   it('renders children with `sections` prop', () => {
     const wrapper = shallow(<Breadcrumb sections={sections} />)
 
-    wrapper.find('BreadcrumbDivider').should.have.length(1)
-    wrapper.find('BreadcrumbSection').should.have.length(2)
+    wrapper.should.have.exactly(1).descendants('BreadcrumbDivider')
+    wrapper.should.have.exactly(2).descendants('BreadcrumbSection')
   })
 
   it('renders defined divider with `divider` prop', () => {
     const wrapper = mount(<Breadcrumb sections={sections} divider='>' />)
     const divider = wrapper.find('BreadcrumbDivider').first()
 
-    divider.text().should.to.equal('>')
-  })
-
-  it('renders divider as `Icon` with `icon` prop', () => {
-    const icon = mount(<Breadcrumb sections={sections} icon='right mangle' />).find('Icon')
-
-    icon.should.have.class('right mangle')
-    icon.should.have.tagName('i')
+    divider.should.contain.text('>')
   })
 })
diff --git a/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js b/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js
index bce32627a2..ec151b02ff 100644
--- a/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js
+++ b/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js
@@ -4,27 +4,11 @@ import * as common from 'test/specs/commonTests'
 
 describe('BreadcrumbDivider', () => {
   common.isConformant(BreadcrumbDivider)
+  common.implementsIconProp(BreadcrumbDivider)
   common.rendersChildren(BreadcrumbDivider)
 
   it('renders as a div by default', () => {
     shallow(<BreadcrumbDivider />)
       .should.have.tagName('div')
   })
-
-  describe('icon prop', () => {
-    it('is not present by default', () => {
-      shallow(<BreadcrumbDivider />)
-        .should.not.have.tagName('i')
-    })
-
-    it('should rendered as i when has prop', () => {
-      shallow(<BreadcrumbDivider icon='right mangle' />)
-        .should.have.tagName('i')
-    })
-
-    it('should have class `divider`', () => {
-      shallow(<BreadcrumbDivider icon='right mangle' />)
-        .should.have.className('divider')
-    })
-  })
 })

From a9ce2e37df0f2f3abd7b883b837451a9f2731a3c Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Fri, 8 Jul 2016 11:32:36 +0300
Subject: [PATCH 19/24] (feat) Breadcrumb docs #321

---
 .../Breadcrumb/BreadcrumbExamples.js          | 60 +++++++++++++++++++
 .../Content/BreadcrumbDividerExample.js       | 16 +++++
 .../Content/BreadcrumbDividerPropExample.js   | 17 ++++++
 .../Content/BreadcrumbIconDividerExample.js   | 16 +++++
 .../BreadcrumbIconDividerPropExample.js       | 17 ++++++
 .../Content/BreadcrumbLinkExample.js          | 16 +++++
 .../Content/BreadcrumbSectionExample.js       | 14 +++++
 .../Content/BreadcrumbSectionPropExample.js   | 16 +++++
 .../Types/BreadcrumbDividerExample.js         | 16 +++++
 .../Breadcrumb/Types/BreadcrumbExample.js     | 16 +++++
 .../Breadcrumb/Types/BreadcrumbPropExample.js | 17 ++++++
 .../Variations/BreadcrumbBigSizeExample.js    | 16 +++++
 .../Variations/BreadcrumbHugeSizeExample.js   | 16 +++++
 .../Variations/BreadcrumbLargeSizeExample.js  | 16 +++++
 .../BreadcrumbMassiveSizeExample.js           | 16 +++++
 .../Variations/BreadcrumbMiniSizeExample.js   | 16 +++++
 .../Variations/BreadcrumbSmallSizeExample.js  | 16 +++++
 .../Variations/BreadcrumbTinySizeExample.js   | 16 +++++
 18 files changed, 333 insertions(+)
 create mode 100644 docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js
 create mode 100644 docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js

diff --git a/docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js b/docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js
new file mode 100644
index 0000000000..3828cf5207
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js
@@ -0,0 +1,60 @@
+import React, { Component } from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+export default class BreadcrumbExamples extends Component {
+  render() {
+    return (
+      <div>
+        <ExampleSection title='Types'>
+          <ComponentExample
+            title='Breadcrumb'
+            description='A standard breadcrumb'
+            examplePath='collections/Breadcrumb/Types/BreadcrumbExample'
+          />
+          <ComponentExample examplePath='collections/Breadcrumb/Types/BreadcrumbDividerExample' />
+          <ComponentExample examplePath='collections/Breadcrumb/Types/BreadcrumbPropExample' />
+        </ExampleSection>
+
+        <ExampleSection title='Content'>
+          <ComponentExample
+            title='Divider'
+            description='A breadcrumb can contain a divider to show the relationship between sections, this can be
+            formatted as an icon or text.'
+            examplePath='collections/Breadcrumb/Content/BreadcrumbDividerExample'
+          />
+          <ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbDividerPropExample' />
+          <ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbIconDividerExample' />
+          <ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample' />
+
+          <ComponentExample
+            title='Section'
+            description='A breadcrumb can contain sections that can either be formatted as a link or text'
+            examplePath='collections/Breadcrumb/Content/BreadcrumbSectionExample'
+          />
+          <ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbSectionPropExample' />
+
+          <ComponentExample
+            title='Link'
+            description='A section may be linkable or contain a link'
+            examplePath='collections/Breadcrumb/Content/BreadcrumbLinkExample'
+          />
+        </ExampleSection>
+
+        <ExampleSection title='Variations'>
+          <ComponentExample
+            title='Size'
+            description='A breadcrumb can vary in size'
+            examplePath='collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample'
+          />
+          <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbTinySizeExample' />
+          <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample' />
+          <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample' />
+          <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbBigSizeExample' />
+          <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample' />
+          <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample' />
+        </ExampleSection>
+      </div>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js
new file mode 100644
index 0000000000..956df80b23
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbDividerExample extends Component {
+  render() {
+    return (
+      <Breadcrumb>
+        <Breadcrumb.Section link>Home</Breadcrumb.Section>
+        <Breadcrumb.Divider>/</Breadcrumb.Divider>
+        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+        <Breadcrumb.Divider>/</Breadcrumb.Divider>
+        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+      </Breadcrumb>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js
new file mode 100644
index 0000000000..21a89f6057
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbDividerPropExample extends Component {
+
+  sections = [
+    { text: 'Home', link: true },
+    { text: 'Registration', link: true },
+    { text: 'Personal Information', active: true },
+  ];
+
+  render() {
+    return (
+      <Breadcrumb divider='/' sections={this.sections} />
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js
new file mode 100644
index 0000000000..e0ffb7e3be
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbIconDividerExample extends Component {
+  render() {
+    return (
+      <Breadcrumb>
+        <Breadcrumb.Section link>Home</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right arrow' />
+        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+      </Breadcrumb>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js
new file mode 100644
index 0000000000..11414e5e2a
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbIconDividerPropExample extends Component {
+
+  sections = [
+    { text: 'Home', link: true },
+    { text: 'Registration', link: true },
+    { text: 'Personal Information', active: true },
+  ];
+
+  render() {
+    return (
+      <Breadcrumb icon='right-angle' sections={this.sections} />
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js
new file mode 100644
index 0000000000..b5ad774e13
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbLinkExample extends Component {
+  render() {
+    return (
+      <Breadcrumb>
+        <Breadcrumb.Section link>Home</Breadcrumb.Section>
+        <Breadcrumb.Divider />
+        <Breadcrumb.Section link>Store</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right angle' />
+        <Breadcrumb.Section active>Search for: <a href='#'>paper towels</a></Breadcrumb.Section>
+      </Breadcrumb>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js
new file mode 100644
index 0000000000..98069ccf12
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbSectionExample extends Component {
+  render() {
+    return (
+      <Breadcrumb>
+        <Breadcrumb.Section link>Home</Breadcrumb.Section>
+        <Breadcrumb.Divider />
+        <Breadcrumb.Section active>Search</Breadcrumb.Section>
+      </Breadcrumb>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js
new file mode 100644
index 0000000000..8a725eb94c
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbSectionPropExample extends Component {
+
+  sections = [
+    { text: 'Home', link: true },
+    { text: 'Search', active: true },
+  ];
+
+  render() {
+    return (
+      <Breadcrumb sections={this.sections} />
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js
new file mode 100644
index 0000000000..0828ff3568
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbDividerExample extends Component {
+  render() {
+    return (
+      <Breadcrumb>
+        <Breadcrumb.Section link>Home</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right angle' />
+        <Breadcrumb.Section link>Store</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right angle' />
+        <Breadcrumb.Section active>T-Shirt</Breadcrumb.Section>
+      </Breadcrumb>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js
new file mode 100644
index 0000000000..eb74a10e86
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbExample extends Component {
+  render() {
+    return (
+      <Breadcrumb>
+        <Breadcrumb.Section link>Home</Breadcrumb.Section>
+        <Breadcrumb.Divider />
+        <Breadcrumb.Section link>Store</Breadcrumb.Section>
+        <Breadcrumb.Divider />
+        <Breadcrumb.Section active>T-Shirt</Breadcrumb.Section>
+      </Breadcrumb>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js
new file mode 100644
index 0000000000..03a94c932d
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbPropExample extends Component {
+
+  sections = [
+    { text: 'Home', link: true },
+    { text: 'Store', link: true },
+    { text: 'T-Shirt', active: true },
+  ];
+
+  render() {
+    return (
+      <Breadcrumb icon='right angle' sections={this.sections} />
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js
new file mode 100644
index 0000000000..4aba172078
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbBigSizeExample extends Component {
+  render() {
+    return (
+      <Breadcrumb size='big'>
+        <Breadcrumb.Section link>Home</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+      </Breadcrumb>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js
new file mode 100644
index 0000000000..81f56a3fbc
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbHugeSizeExample extends Component {
+  render() {
+    return (
+      <Breadcrumb size='huge'>
+        <Breadcrumb.Section link>Home</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+      </Breadcrumb>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js
new file mode 100644
index 0000000000..4905585e48
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbLargeSizeExample extends Component {
+  render() {
+    return (
+      <Breadcrumb size='large'>
+        <Breadcrumb.Section link>Home</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+      </Breadcrumb>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js
new file mode 100644
index 0000000000..8f6a4c4ee7
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbMassiveSizeExample extends Component {
+  render() {
+    return (
+      <Breadcrumb size='massive'>
+        <Breadcrumb.Section link>Home</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+      </Breadcrumb>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js
new file mode 100644
index 0000000000..0b889d89ad
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbMiniSizeExample extends Component {
+  render() {
+    return (
+      <Breadcrumb size='mini'>
+        <Breadcrumb.Section link>Home</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+      </Breadcrumb>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js
new file mode 100644
index 0000000000..7cc0a8daf3
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbSmallSizeExample extends Component {
+  render() {
+    return (
+      <Breadcrumb size='small'>
+        <Breadcrumb.Section link>Home</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+      </Breadcrumb>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js
new file mode 100644
index 0000000000..269755a759
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Breadcrumb } from 'stardust'
+
+export default class BreadcrumbTinySizeExample extends Component {
+  render() {
+    return (
+      <Breadcrumb size='tiny'>
+        <Breadcrumb.Section link>Home</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+        <Breadcrumb.Divider icon='right chevron' />
+        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+      </Breadcrumb>
+    )
+  }
+}

From a299332774bdcd08691a520cba67b8a78124cd83 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Mon, 11 Jul 2016 10:54:16 +0300
Subject: [PATCH 20/24] (fix) Breadcrumb docs #321

---
 .../Breadcrumb/BreadcrumbExamples.js          |  6 +++--
 .../BreadcrumbIconDividerPropExample.js       | 23 ++++++++-----------
 .../Content/BreadcrumbSectionPropExample.js   | 21 ++++++++---------
 3 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js b/docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js
index 3828cf5207..9e379520a3 100644
--- a/docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js
+++ b/docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js
@@ -19,8 +19,10 @@ export default class BreadcrumbExamples extends Component {
         <ExampleSection title='Content'>
           <ComponentExample
             title='Divider'
-            description='A breadcrumb can contain a divider to show the relationship between sections, this can be
-            formatted as an icon or text.'
+            description={[
+              'A breadcrumb can contain a divider to show the relationship between sections,',
+              'this can be formatted as an icon or text.',
+            ].join(' ')}
             examplePath='collections/Breadcrumb/Content/BreadcrumbDividerExample'
           />
           <ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbDividerPropExample' />
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js
index 11414e5e2a..c832093cf1 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js
@@ -1,17 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbIconDividerPropExample extends Component {
+const sections = [
+  { text: 'Home', link: true },
+  { text: 'Registration', link: true },
+  { text: 'Personal Information', active: true },
+]
 
-  sections = [
-    { text: 'Home', link: true },
-    { text: 'Registration', link: true },
-    { text: 'Personal Information', active: true },
-  ];
+const BreadcrumbDividerPropExample = () => (
+  <Breadcrumb divider='/' sections={sections} />
+)
 
-  render() {
-    return (
-      <Breadcrumb icon='right-angle' sections={this.sections} />
-    )
-  }
-}
+export default BreadcrumbDividerPropExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js
index 8a725eb94c..84652419fc 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js
@@ -1,16 +1,13 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbSectionPropExample extends Component {
+const sections = [
+  { text: 'Home', link: true },
+  { text: 'Search', active: true },
+]
 
-  sections = [
-    { text: 'Home', link: true },
-    { text: 'Search', active: true },
-  ];
+const BreadcrumbSectionPropExample = () => (
+  <Breadcrumb sections={sections} />
+)
 
-  render() {
-    return (
-      <Breadcrumb sections={this.sections} />
-    )
-  }
-}
+export default BreadcrumbSectionPropExample

From 32b53d4bef684fb04e79013e51ad77e09d4e3207 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Mon, 11 Jul 2016 18:49:33 +0300
Subject: [PATCH 21/24] (fix) Breadcrumb #321

---
 src/collections/Breadcrumb/Breadcrumb.js        |  6 +++---
 src/collections/Breadcrumb/BreadcrumbDivider.js |  6 +++---
 src/collections/Breadcrumb/BreadcrumbSection.js | 14 +++++++-------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index 9aee4be7ef..7f8b1c7e59 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -2,7 +2,7 @@ import _ from 'lodash'
 import cx from 'classnames'
 import React, { PropTypes } from 'react'
 import META from 'src/utils/Meta'
-import { customPropTypes } from '../../utils/propUtils'
+import { customPropTypes, getUnhandledProps } from '../../utils/propUtils'
 import * as sui from '../../utils/semanticUtils'
 import BreadcrumbDivider from './BreadcrumbDivider'
 import BreadcrumbSection from './BreadcrumbSection'
@@ -12,14 +12,14 @@ import BreadcrumbSection from './BreadcrumbSection'
  */
 function Breadcrumb(props) {
   const {
-    children, divider, icon, size, sections, ...rest,
+    children, divider, icon, size, sections,
   } = props
-
   const classes = cx(
     'ui',
     size,
     'breadcrumb'
   )
+  const rest = getUnhandledProps(Breadcrumb, props)
 
   if (!sections) {
     return <div className={classes} {...rest}>{children}</div>
diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js
index 51a08e01da..70d5d0fa50 100644
--- a/src/collections/Breadcrumb/BreadcrumbDivider.js
+++ b/src/collections/Breadcrumb/BreadcrumbDivider.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import cx from 'classnames'
 import META from '../../utils/Meta'
-import { customPropTypes } from '../../utils/propUtils'
+import { customPropTypes, getUnhandledProps } from '../../utils/propUtils'
 import Icon from 'src/elements/Icon/Icon'
 
 /**
@@ -9,13 +9,13 @@ import Icon from 'src/elements/Icon/Icon'
  */
 function BreadcrumbDivider(props) {
   const {
-    children, icon, className, ...rest,
+    children, icon, className,
   } = props
-
   const classes = cx(
     className,
     'divider',
   )
+  const rest = getUnhandledProps(BreadcrumbDivider, props)
 
   if (icon) {
     return <Icon className={classes} name={icon} {...rest} />
diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index cf40c1c96e..2754932682 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -1,25 +1,25 @@
 import React, { PropTypes } from 'react'
 import cx from 'classnames'
 import META from '../../utils/Meta'
-import { customPropTypes, useKeyOnly } from '../../utils/propUtils'
+import { customPropTypes, getUnhandledProps, useKeyOnly } from '../../utils/propUtils'
 
 /**
  * A section sub-component for Breadcrumb component.
  */
 function BreadcrumbSection(props) {
   const {
-    active, children, className, link, href, onClick, ...rest,
+    active, children, className, link, href, onClick,
   } = props
-
-  const handleClick = (e) => {
-    if (onClick) onClick(e)
-  }
-
   const classes = cx(
     useKeyOnly(active, 'active'),
     className,
     'section',
   )
+  const rest = getUnhandledProps(BreadcrumbSection, props)
+
+  const handleClick = (e) => {
+    if (onClick) onClick(e)
+  }
 
   if (link || onClick) {
     return (

From 9edb4a0a8a6ac6cc540d19df8caf528bfc09cfbc Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Fri, 15 Jul 2016 10:39:07 +0300
Subject: [PATCH 22/24] (fix) Breadcrumb docs

---
 .../Content/BreadcrumbDividerExample.js       | 26 +++++++++----------
 .../Content/BreadcrumbDividerPropExample.js   | 23 +++++++---------
 .../Content/BreadcrumbIconDividerExample.js   | 26 +++++++++----------
 .../Content/BreadcrumbLinkExample.js          | 26 +++++++++----------
 .../Content/BreadcrumbSectionExample.js       | 22 +++++++---------
 .../Types/BreadcrumbDividerExample.js         | 26 +++++++++----------
 .../Breadcrumb/Types/BreadcrumbExample.js     | 26 +++++++++----------
 .../Breadcrumb/Types/BreadcrumbPropExample.js | 23 +++++++---------
 .../Variations/BreadcrumbBigSizeExample.js    | 26 +++++++++----------
 .../Variations/BreadcrumbHugeSizeExample.js   | 26 +++++++++----------
 .../Variations/BreadcrumbLargeSizeExample.js  | 26 +++++++++----------
 .../BreadcrumbMassiveSizeExample.js           | 26 +++++++++----------
 .../Variations/BreadcrumbMiniSizeExample.js   | 26 +++++++++----------
 .../Variations/BreadcrumbSmallSizeExample.js  | 26 +++++++++----------
 .../Variations/BreadcrumbTinySizeExample.js   | 26 +++++++++----------
 15 files changed, 174 insertions(+), 206 deletions(-)

diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js
index 956df80b23..73c376ccdb 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js
@@ -1,16 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbDividerExample extends Component {
-  render() {
-    return (
-      <Breadcrumb>
-        <Breadcrumb.Section link>Home</Breadcrumb.Section>
-        <Breadcrumb.Divider>/</Breadcrumb.Divider>
-        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
-        <Breadcrumb.Divider>/</Breadcrumb.Divider>
-        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
-      </Breadcrumb>
-    )
-  }
-}
+const BreadcrumbDividerExample = () => (
+  <Breadcrumb>
+    <Breadcrumb.Section link>Home</Breadcrumb.Section>
+    <Breadcrumb.Divider>/</Breadcrumb.Divider>
+    <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+    <Breadcrumb.Divider>/</Breadcrumb.Divider>
+    <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+  </Breadcrumb>
+)
+
+export default BreadcrumbDividerExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js
index 21a89f6057..c832093cf1 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js
@@ -1,17 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbDividerPropExample extends Component {
+const sections = [
+  { text: 'Home', link: true },
+  { text: 'Registration', link: true },
+  { text: 'Personal Information', active: true },
+]
 
-  sections = [
-    { text: 'Home', link: true },
-    { text: 'Registration', link: true },
-    { text: 'Personal Information', active: true },
-  ];
+const BreadcrumbDividerPropExample = () => (
+  <Breadcrumb divider='/' sections={sections} />
+)
 
-  render() {
-    return (
-      <Breadcrumb divider='/' sections={this.sections} />
-    )
-  }
-}
+export default BreadcrumbDividerPropExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js
index e0ffb7e3be..cc50511887 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js
@@ -1,16 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbIconDividerExample extends Component {
-  render() {
-    return (
-      <Breadcrumb>
-        <Breadcrumb.Section link>Home</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right arrow' />
-        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
-      </Breadcrumb>
-    )
-  }
-}
+const BreadcrumbIconDividerExample = () => (
+  <Breadcrumb>
+    <Breadcrumb.Section link>Home</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right arrow' />
+    <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+  </Breadcrumb>
+)
+
+export default BreadcrumbIconDividerExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js
index b5ad774e13..0c9c23b5f5 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js
@@ -1,16 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbLinkExample extends Component {
-  render() {
-    return (
-      <Breadcrumb>
-        <Breadcrumb.Section link>Home</Breadcrumb.Section>
-        <Breadcrumb.Divider />
-        <Breadcrumb.Section link>Store</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right angle' />
-        <Breadcrumb.Section active>Search for: <a href='#'>paper towels</a></Breadcrumb.Section>
-      </Breadcrumb>
-    )
-  }
-}
+const BreadcrumbLinkExample = () => (
+  <Breadcrumb>
+    <Breadcrumb.Section link>Home</Breadcrumb.Section>
+    <Breadcrumb.Divider />
+    <Breadcrumb.Section link>Store</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right angle' />
+    <Breadcrumb.Section active>Search for: <a href='#'>paper towels</a></Breadcrumb.Section>
+  </Breadcrumb>
+)
+
+export default BreadcrumbLinkExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js
index 98069ccf12..f5821760eb 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js
@@ -1,14 +1,12 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbSectionExample extends Component {
-  render() {
-    return (
-      <Breadcrumb>
-        <Breadcrumb.Section link>Home</Breadcrumb.Section>
-        <Breadcrumb.Divider />
-        <Breadcrumb.Section active>Search</Breadcrumb.Section>
-      </Breadcrumb>
-    )
-  }
-}
+const BreadcrumbSectionExample = () => (
+  <Breadcrumb>
+    <Breadcrumb.Section link>Home</Breadcrumb.Section>
+    <Breadcrumb.Divider />
+    <Breadcrumb.Section active>Search</Breadcrumb.Section>
+  </Breadcrumb>
+)
+
+export default BreadcrumbSectionExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js
index 0828ff3568..7f790796ce 100644
--- a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js
@@ -1,16 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbDividerExample extends Component {
-  render() {
-    return (
-      <Breadcrumb>
-        <Breadcrumb.Section link>Home</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right angle' />
-        <Breadcrumb.Section link>Store</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right angle' />
-        <Breadcrumb.Section active>T-Shirt</Breadcrumb.Section>
-      </Breadcrumb>
-    )
-  }
-}
+const BreadcrumbDividerExample = () => (
+  <Breadcrumb>
+    <Breadcrumb.Section link>Home</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right angle' />
+    <Breadcrumb.Section link>Store</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right angle' />
+    <Breadcrumb.Section active>T-Shirt</Breadcrumb.Section>
+  </Breadcrumb>
+)
+
+export default BreadcrumbDividerExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js
index eb74a10e86..ff05f11b71 100644
--- a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js
@@ -1,16 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbExample extends Component {
-  render() {
-    return (
-      <Breadcrumb>
-        <Breadcrumb.Section link>Home</Breadcrumb.Section>
-        <Breadcrumb.Divider />
-        <Breadcrumb.Section link>Store</Breadcrumb.Section>
-        <Breadcrumb.Divider />
-        <Breadcrumb.Section active>T-Shirt</Breadcrumb.Section>
-      </Breadcrumb>
-    )
-  }
-}
+const BreadcrumbExample = () => (
+  <Breadcrumb>
+    <Breadcrumb.Section link>Home</Breadcrumb.Section>
+    <Breadcrumb.Divider />
+    <Breadcrumb.Section link>Store</Breadcrumb.Section>
+    <Breadcrumb.Divider />
+    <Breadcrumb.Section active>T-Shirt</Breadcrumb.Section>
+  </Breadcrumb>
+)
+
+export default BreadcrumbExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js
index 03a94c932d..801b30a1ba 100644
--- a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js
@@ -1,17 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbPropExample extends Component {
+const sections = [
+  { text: 'Home', link: true },
+  { text: 'Store', link: true },
+  { text: 'T-Shirt', active: true },
+]
 
-  sections = [
-    { text: 'Home', link: true },
-    { text: 'Store', link: true },
-    { text: 'T-Shirt', active: true },
-  ];
+const BreadcrumbPropExample = () => (
+  <Breadcrumb icon='right angle' sections={sections} />
+)
 
-  render() {
-    return (
-      <Breadcrumb icon='right angle' sections={this.sections} />
-    )
-  }
-}
+export default BreadcrumbPropExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js
index 4aba172078..31ea8bf071 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js
@@ -1,16 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbBigSizeExample extends Component {
-  render() {
-    return (
-      <Breadcrumb size='big'>
-        <Breadcrumb.Section link>Home</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
-      </Breadcrumb>
-    )
-  }
-}
+const BreadcrumbBigSizeExample = () => (
+  <Breadcrumb size='big'>
+    <Breadcrumb.Section link>Home</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+  </Breadcrumb>
+)
+
+export default BreadcrumbBigSizeExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js
index 81f56a3fbc..1e60714fba 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js
@@ -1,16 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbHugeSizeExample extends Component {
-  render() {
-    return (
-      <Breadcrumb size='huge'>
-        <Breadcrumb.Section link>Home</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
-      </Breadcrumb>
-    )
-  }
-}
+const BreadcrumbHugeSizeExample = () => (
+  <Breadcrumb size='huge'>
+    <Breadcrumb.Section link>Home</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+  </Breadcrumb>
+)
+
+export default BreadcrumbHugeSizeExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js
index 4905585e48..7f457ba08a 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js
@@ -1,16 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbLargeSizeExample extends Component {
-  render() {
-    return (
-      <Breadcrumb size='large'>
-        <Breadcrumb.Section link>Home</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
-      </Breadcrumb>
-    )
-  }
-}
+const BreadcrumbLargeSizeExample = () => (
+  <Breadcrumb size='large'>
+    <Breadcrumb.Section link>Home</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+  </Breadcrumb>
+)
+
+export default BreadcrumbLargeSizeExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js
index 8f6a4c4ee7..90d646c907 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js
@@ -1,16 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbMassiveSizeExample extends Component {
-  render() {
-    return (
-      <Breadcrumb size='massive'>
-        <Breadcrumb.Section link>Home</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
-      </Breadcrumb>
-    )
-  }
-}
+const BreadcrumbMassiveSizeExample = () => (
+  <Breadcrumb size='massive'>
+    <Breadcrumb.Section link>Home</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+  </Breadcrumb>
+)
+
+export default BreadcrumbMassiveSizeExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js
index 0b889d89ad..c2cc9d7808 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js
@@ -1,16 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbMiniSizeExample extends Component {
-  render() {
-    return (
-      <Breadcrumb size='mini'>
-        <Breadcrumb.Section link>Home</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
-      </Breadcrumb>
-    )
-  }
-}
+const BreadcrumbMiniSizeExample = () => (
+  <Breadcrumb size='mini'>
+    <Breadcrumb.Section link>Home</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+  </Breadcrumb>
+)
+
+export default BreadcrumbMiniSizeExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js
index 7cc0a8daf3..933bf7e2dd 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js
@@ -1,16 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbSmallSizeExample extends Component {
-  render() {
-    return (
-      <Breadcrumb size='small'>
-        <Breadcrumb.Section link>Home</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
-      </Breadcrumb>
-    )
-  }
-}
+const BreadcrumbSmallSizeExample = () => (
+  <Breadcrumb size='small'>
+    <Breadcrumb.Section link>Home</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+  </Breadcrumb>
+)
+
+export default BreadcrumbSmallSizeExample
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js
index 269755a759..fc8da8d991 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js
@@ -1,16 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Breadcrumb } from 'stardust'
 
-export default class BreadcrumbTinySizeExample extends Component {
-  render() {
-    return (
-      <Breadcrumb size='tiny'>
-        <Breadcrumb.Section link>Home</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section link>Registration</Breadcrumb.Section>
-        <Breadcrumb.Divider icon='right chevron' />
-        <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
-      </Breadcrumb>
-    )
-  }
-}
+const BreadcrumbTinySizeExample = () => (
+  <Breadcrumb size='tiny'>
+    <Breadcrumb.Section link>Home</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section link>Registration</Breadcrumb.Section>
+    <Breadcrumb.Divider icon='right chevron' />
+    <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
+  </Breadcrumb>
+)
+
+export default BreadcrumbTinySizeExample

From ba14592026049b1406c5bf8d9e4e6e5ac3da35fe Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Fri, 15 Jul 2016 10:58:25 +0300
Subject: [PATCH 23/24] (fix) Breadcrumb

---
 src/collections/Breadcrumb/BreadcrumbDivider.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js
index 70d5d0fa50..716a3d9f41 100644
--- a/src/collections/Breadcrumb/BreadcrumbDivider.js
+++ b/src/collections/Breadcrumb/BreadcrumbDivider.js
@@ -18,7 +18,10 @@ function BreadcrumbDivider(props) {
   const rest = getUnhandledProps(BreadcrumbDivider, props)
 
   if (icon) {
-    return <Icon className={classes} name={icon} {...rest} />
+    // TODO: After update <Icon> to API replace with this code:
+    // return <Icon className={classes} name={icon} {...rest} />
+
+    return <Icon className={[icon, classes].join(' ')} {...rest} />
   }
 
   return <div className={classes} {...rest}>{children}</div>

From 9398fa5b20e4fbe203b3690a8822c2bf47f8199e Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Sun, 17 Jul 2016 21:03:57 +0300
Subject: [PATCH 24/24] (Breadcrumb) Test update

---
 src/collections/Breadcrumb/Breadcrumb.js      | 12 ++++++----
 .../Breadcrumb/BreadcrumbDivider.js           | 23 +++++++++++--------
 .../Breadcrumb/BreadcrumbSection.js           |  2 +-
 3 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index 7f8b1c7e59..f92ea77d20 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -12,17 +12,18 @@ import BreadcrumbSection from './BreadcrumbSection'
  */
 function Breadcrumb(props) {
   const {
-    children, divider, icon, size, sections,
+    children, className, divider, icon, size, sections,
   } = props
   const classes = cx(
     'ui',
+    className,
     size,
     'breadcrumb'
   )
   const rest = getUnhandledProps(Breadcrumb, props)
 
   if (!sections) {
-    return <div className={classes} {...rest}>{children}</div>
+    return <div {...rest} className={classes}>{children}</div>
   }
 
   const dividerJSX = <Breadcrumb.Divider icon={icon}>{divider}</Breadcrumb.Divider>
@@ -41,7 +42,7 @@ function Breadcrumb(props) {
     }
   })
 
-  return <div className={classes} {...rest}>{sectionsJSX}</div>
+  return <div {...rest} className={classes}>{sectionsJSX}</div>
 }
 
 Breadcrumb._meta = {
@@ -60,6 +61,9 @@ Breadcrumb.propTypes = {
     PropTypes.node,
   ]),
 
+  /** Classes that will be added to the Breadcrumb className. */
+  className: PropTypes.string,
+
   /** For use with the sections prop. Primary content of the Breadcrumb.Divider. */
   divider: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['icon']),
@@ -70,7 +74,7 @@ Breadcrumb.propTypes = {
    *  Breadcrumb.Divider. */
   icon: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['divider']),
-    PropTypes.string,
+    PropTypes.node,
   ]),
 
   /** Array of props for Breadcrumb.Section. */
diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js
index 716a3d9f41..40fe35a54e 100644
--- a/src/collections/Breadcrumb/BreadcrumbDivider.js
+++ b/src/collections/Breadcrumb/BreadcrumbDivider.js
@@ -1,8 +1,8 @@
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 import cx from 'classnames'
 import META from '../../utils/Meta'
-import { customPropTypes, getUnhandledProps } from '../../utils/propUtils'
-import Icon from 'src/elements/Icon/Icon'
+import { customPropTypes, iconPropRenderer, getUnhandledProps } from '../../utils/propUtils'
 
 /**
  * A divider sub-component for Breadcrumb component.
@@ -18,13 +18,16 @@ function BreadcrumbDivider(props) {
   const rest = getUnhandledProps(BreadcrumbDivider, props)
 
   if (icon) {
-    // TODO: After update <Icon> to API replace with this code:
-    // return <Icon className={classes} name={icon} {...rest} />
+    // TODO: After update <Icon> to API update propName
 
-    return <Icon className={[icon, classes].join(' ')} {...rest} />
+    const iconClasses = _.isString(icon)
+      ? cx(icon, classes)
+      : cx(icon.props.className, classes)
+
+    return iconPropRenderer(icon, { ...rest, className: iconClasses })
   }
 
-  return <div className={classes} {...rest}>{children}</div>
+  return <div {...rest} className={classes}>{children}</div>
 }
 
 BreadcrumbDivider._meta = {
@@ -45,14 +48,14 @@ BreadcrumbDivider.propTypes = {
     PropTypes.node,
   ]),
 
+  /** Classes that will be added to the BreadcrumbDivider className. */
+  className: PropTypes.string,
+
   /** Render as an `Icon` component with `divider` class instead of a `div`. */
   icon: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['children']),
-    PropTypes.string,
+    PropTypes.node,
   ]),
-
-  /** Additional classes added to the element. */
-  className: PropTypes.string,
 }
 
 export default BreadcrumbDivider
diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index 2754932682..34be351739 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -58,7 +58,7 @@ BreadcrumbSection.propTypes = {
   /** Primary content of the Breadcrumb.Section. */
   children: PropTypes.node,
 
-  /** Additional classes added to the element. */
+  /** Classes that will be added to the BreadcrumbSection className. */
   className: PropTypes.string,
 
   /** Render as an `a` tag instead of a `div`. */