diff --git a/ui/app/templates/components/freestyle/sg-breadcrumbs.hbs b/ui/app/templates/components/freestyle/sg-breadcrumbs.hbs
new file mode 100644
index 000000000..8ad173adf
--- /dev/null
+++ b/ui/app/templates/components/freestyle/sg-breadcrumbs.hbs
@@ -0,0 +1,33 @@
+{{#freestyle-usage 'breadcrumbs-standard' title='Standard Breadcrumbs'}}
+  <div class="navbar is-secondary">
+    <div class="navbar-item"></div>
+    <nav class="breadcrumb is-large">
+      <li>
+        <a href="#">Topic</a>
+      </li>
+      <li>
+        <a href="#">Sub-topic</a>
+      </li>
+      <li class="is-active">
+        <a href="#">Active Topic</a>
+      </li>
+    </nav>
+  </div>
+{{/freestyle-usage}}
+{{#freestyle-annotation}}
+  Breadcrumbs are only ever used in the secondary nav of the primary header.
+{{/freestyle-annotation}}
+
+{{#freestyle-usage 'breadcrumbs-single' title='Single Breadcrumb'}}
+  <div class="navbar is-secondary">
+    <div class="navbar-item"></div>
+    <nav class="breadcrumb is-large">
+      <li>
+        <a href="#">Topic</a>
+      </li>
+    </nav>
+  </div>
+{{/freestyle-usage}}
+{{#freestyle-annotation}}
+  Breadcrumbs are given a lot of emphasis and often double as a page title. Since they are also global state, they are important for helping a user keep their bearings.
+{{/freestyle-annotation}}
diff --git a/ui/app/templates/freestyle.hbs b/ui/app/templates/freestyle.hbs
index 62103f9c8..a1398fcf0 100644
--- a/ui/app/templates/freestyle.hbs
+++ b/ui/app/templates/freestyle.hbs
@@ -18,11 +18,15 @@
       {{#section.subsection name="Boxed section"}}
         {{freestyle/sg-boxed-section}}
       {{/section.subsection}}
+
       {{#section.subsection name="Breadcrumbs"}}
+        {{freestyle/sg-breadcrumbs}}
       {{/section.subsection}}
+
       {{#section.subsection name="Buttons"}}
         {{freestyle/sg-buttons}}
       {{/section.subsection}}
+
       {{#section.subsection name="Diff Viewer"}}
       {{/section.subsection}}
       {{#section.subsection name="Dropdown"}}