diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleDivider.js
similarity index 82%
rename from docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js
rename to docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleDivider.js
index faabef108d..1fba7d4aac 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleDivider.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbDividerExample = () => (
+const BreadcrumbExampleDivider = () => (
   <Breadcrumb>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider>/</Breadcrumb.Divider>
@@ -11,4 +11,4 @@ const BreadcrumbDividerExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbDividerExample
+export default BreadcrumbExampleDivider
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleDividerProps.js
similarity index 74%
rename from docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js
rename to docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleDividerProps.js
index 3e455eeff4..c3e1498b3f 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleDividerProps.js
@@ -7,8 +7,8 @@ const sections = [
   { text: 'Personal Information', active: true },
 ]
 
-const BreadcrumbDividerPropExample = () => (
+const BreadcrumbExampleDividerProps = () => (
   <Breadcrumb divider='/' sections={sections} />
 )
 
-export default BreadcrumbDividerPropExample
+export default BreadcrumbExampleDividerProps
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleIconDivider.js
similarity index 81%
rename from docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js
rename to docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleIconDivider.js
index 60db933ad6..1486c59924 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleIconDivider.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbIconDividerExample = () => (
+const BreadcrumbExampleIconDivider = () => (
   <Breadcrumb>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbIconDividerExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbIconDividerExample
+export default BreadcrumbExampleIconDivider
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleIconDividerProps.js
similarity index 73%
rename from docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js
rename to docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleIconDividerProps.js
index 3e455eeff4..c5ff4f0bf1 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleIconDividerProps.js
@@ -7,8 +7,8 @@ const sections = [
   { text: 'Personal Information', active: true },
 ]
 
-const BreadcrumbDividerPropExample = () => (
+const BreadcrumbExampleIconDividerProps = () => (
   <Breadcrumb divider='/' sections={sections} />
 )
 
-export default BreadcrumbDividerPropExample
+export default BreadcrumbExampleIconDividerProps
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleLink.js
similarity index 83%
rename from docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js
rename to docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleLink.js
index 2b48f2f180..522ddd4bf8 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleLink.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbLinkExample = () => (
+const BreadcrumbExampleLink = () => (
   <Breadcrumb>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider />
@@ -11,4 +11,4 @@ const BreadcrumbLinkExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbLinkExample
+export default BreadcrumbExampleLink
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleSection.js
similarity index 75%
rename from docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js
rename to docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleSection.js
index 6e27499067..f4dd2833aa 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleSection.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbSectionExample = () => (
+const BreadcrumbExampleSection = () => (
   <Breadcrumb>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider />
@@ -9,4 +9,4 @@ const BreadcrumbSectionExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbSectionExample
+export default BreadcrumbExampleSection
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleSectionProps.js
similarity index 69%
rename from docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js
rename to docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleSectionProps.js
index 40f4eb9407..0183a15065 100644
--- a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleSectionProps.js
@@ -6,8 +6,8 @@ const sections = [
   { text: 'Search', active: true },
 ]
 
-const BreadcrumbSectionPropExample = () => (
+const BreadcrumbExampleSectionProps = () => (
   <Breadcrumb sections={sections} />
 )
 
-export default BreadcrumbSectionPropExample
+export default BreadcrumbExampleSectionProps
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/index.js b/docs/app/Examples/collections/Breadcrumb/Content/index.js
new file mode 100644
index 0000000000..b7a133512d
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Content/index.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const BreadcrumbContentExamples = () => (
+  <div>
+    <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.',
+        ].join(' ')}
+        examplePath='collections/Breadcrumb/Content/BreadcrumbExampleDivider'
+      />
+      <ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbExampleDividerProps' />
+      <ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbExampleIconDivider' />
+      <ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbExampleIconDividerProps' />
+
+      <ComponentExample
+        title='Section'
+        description='A breadcrumb can contain sections that can either be formatted as a link or text.'
+        examplePath='collections/Breadcrumb/Content/BreadcrumbExampleSection'
+      />
+      <ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbExampleSectionProps' />
+
+      <ComponentExample
+        title='Link'
+        description='A section may be linkable or contain a link.'
+        examplePath='collections/Breadcrumb/Content/BreadcrumbExampleLink'
+      />
+    </ExampleSection>
+  </div>
+)
+
+export default BreadcrumbContentExamples
diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleDivider.js
similarity index 82%
rename from docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js
rename to docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleDivider.js
index 87d1d1610f..f56954fc87 100644
--- a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleDivider.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbDividerExample = () => (
+const BreadcrumbExampleDivider = () => (
   <Breadcrumb>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right angle' />
@@ -11,4 +11,4 @@ const BreadcrumbDividerExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbDividerExample
+export default BreadcrumbExampleDivider
diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleProps.js
similarity index 76%
rename from docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js
rename to docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleProps.js
index 97b95c28cb..edc52f095e 100644
--- a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleProps.js
@@ -7,8 +7,8 @@ const sections = [
   { text: 'T-Shirt', active: true },
 ]
 
-const BreadcrumbPropExample = () => (
+const BreadcrumbExampleProps = () => (
   <Breadcrumb icon='right angle' sections={sections} />
 )
 
-export default BreadcrumbPropExample
+export default BreadcrumbExampleProps
diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleStandard.js
similarity index 80%
rename from docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js
rename to docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleStandard.js
index 2962d0e77c..7adbc2f49d 100644
--- a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleStandard.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbExample = () => (
+const BreadcrumbExampleStandard = () => (
   <Breadcrumb>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider />
@@ -11,4 +11,4 @@ const BreadcrumbExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbExample
+export default BreadcrumbExampleStandard
diff --git a/docs/app/Examples/collections/Breadcrumb/Types/index.js b/docs/app/Examples/collections/Breadcrumb/Types/index.js
new file mode 100644
index 0000000000..2b400c0e51
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Types/index.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const BreadcrumbTypesExamples = () => (
+  <div>
+    <ExampleSection title='Types'>
+      <ComponentExample
+        title='Breadcrumb'
+        description='A standard breadcrumb.'
+        examplePath='collections/Breadcrumb/Types/BreadcrumbExampleStandard'
+      />
+      <ComponentExample examplePath='collections/Breadcrumb/Types/BreadcrumbExampleDivider' />
+      <ComponentExample examplePath='collections/Breadcrumb/Types/BreadcrumbExampleProps' />
+    </ExampleSection>
+  </div>
+)
+
+export default BreadcrumbTypesExamples
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleBigSize.js
similarity index 83%
rename from docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js
rename to docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleBigSize.js
index b7ae68fd7f..a5c55e5176 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleBigSize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbBigSizeExample = () => (
+const BreadcrumbExampleBigSize = () => (
   <Breadcrumb size='big'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbBigSizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbBigSizeExample
+export default BreadcrumbExampleBigSize
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleHugeSize.js
similarity index 83%
rename from docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js
rename to docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleHugeSize.js
index 18eba6bc3f..de96cac59f 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleHugeSize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbHugeSizeExample = () => (
+const BreadcrumbExampleHugeSize = () => (
   <Breadcrumb size='huge'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbHugeSizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbHugeSizeExample
+export default BreadcrumbExampleHugeSize
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleLargeSize.js
similarity index 82%
rename from docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js
rename to docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleLargeSize.js
index 2746c71103..0e1d1f5340 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleLargeSize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbLargeSizeExample = () => (
+const BreadcrumbExampleLargeSize = () => (
   <Breadcrumb size='large'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbLargeSizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbLargeSizeExample
+export default BreadcrumbExampleLargeSize
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleMassiveSize.js
similarity index 82%
rename from docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js
rename to docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleMassiveSize.js
index 2e99d865fd..f0ab0c85df 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleMassiveSize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbMassiveSizeExample = () => (
+const BreadcrumbExampleMassiveSize = () => (
   <Breadcrumb size='massive'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbMassiveSizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbMassiveSizeExample
+export default BreadcrumbExampleMassiveSize
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleMiniSize.js
similarity index 83%
rename from docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js
rename to docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleMiniSize.js
index 3af97f4bce..eb3f4b0bd2 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleMiniSize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbMiniSizeExample = () => (
+const BreadcrumbExampleMiniSize = () => (
   <Breadcrumb size='mini'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbMiniSizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbMiniSizeExample
+export default BreadcrumbExampleMiniSize
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleSmallSize.js
similarity index 82%
rename from docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js
rename to docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleSmallSize.js
index f7e3c1f541..c3d2f61587 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleSmallSize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbSmallSizeExample = () => (
+const BreadcrumbExampleSmallSize = () => (
   <Breadcrumb size='small'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbSmallSizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbSmallSizeExample
+export default BreadcrumbExampleSmallSize
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleTinySize.js
similarity index 83%
rename from docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js
rename to docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleTinySize.js
index 37042aca25..37d63c9b2a 100644
--- a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleTinySize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbTinySizeExample = () => (
+const BreadcrumbExampleTinySize = () => (
   <Breadcrumb size='tiny'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbTinySizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbTinySizeExample
+export default BreadcrumbExampleTinySize
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/index.js b/docs/app/Examples/collections/Breadcrumb/Variations/index.js
new file mode 100644
index 0000000000..1195a2fcb2
--- /dev/null
+++ b/docs/app/Examples/collections/Breadcrumb/Variations/index.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const BreadcrumbVariationsExamples = () => (
+  <div>
+    <ExampleSection title='Variations'>
+      <ComponentExample
+        title='Size'
+        description='A breadcrumb can vary in size.'
+        examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleMiniSize'
+      />
+      <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleTinySize' />
+      <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleSmallSize' />
+      <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleLargeSize' />
+      <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleBigSize' />
+      <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleHugeSize' />
+      <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleMassiveSize' />
+    </ExampleSection>
+  </div>
+)
+
+export default BreadcrumbVariationsExamples
diff --git a/docs/app/Examples/collections/Breadcrumb/index.js b/docs/app/Examples/collections/Breadcrumb/index.js
index 1e43c7905e..05ba5044a1 100644
--- a/docs/app/Examples/collections/Breadcrumb/index.js
+++ b/docs/app/Examples/collections/Breadcrumb/index.js
@@ -1,59 +1,13 @@
 import React from 'react'
-import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
-import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import Types from './Types'
+import Content from './Content'
+import Variations from './Variations'
 
 const BreadcrumbExamples = () => (
   <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.',
-        ].join(' ')}
-        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>
+    <Types />
+    <Content />
+    <Variations />
   </div>
 )