Add documentation content example

source/documentation/breadcrumbs.html.erb

@@ -0,0 +1,21 @@
+<main id="content" class="app-c-content" role="main">
+  <div class="app-c-content__header">
+    <p class="app-c-content__section-heading">components</p>
+    <h1 class="app-c-content__heading heading-xlarge">Breadcrumbs</h1>
+  </div>
+  <p>The Breadcrumbs component helps users to understand where they are within a website’s structure and move between levels.</p>
+
+  <h2>When to use this component</h2>
+  <p>Use the Breadcrumbs component when you need to help users understand and move between the multiple levels of a  website.</p>
+
+  <h3>When not to use this component</h3>
+  <p>Don’t use the Breadcrumbs component on websites with a flat structure, or to show progress through a linear journey or transaction.</p>
+  <p>If you’re using other navigational devices on the page, such as a sidebar, consider whether your users need the additional guidance of breadcrumbs.</p>
+
+  <h2>How it works</h2>
+  <p>The Breadcrumbs component should include the user’s current page, which should be visually different from the other pages linked to in the breadcrumb.</p>
+  <p>There are two ways to use the Breadcrumbs component. You can use HTML or, if you are using <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> or the GOV.UK Prototype Kit, you can use the Breadcrumbs macro.</p>
+
+  <h2>Research on this component</h2>
+  <p>If you’ve used this component, <a href="#get-in-touch">get in touch</a> to share your user research findings.</p>
+</main>