Add style guide entry

_includes/site/breadcrumbs.html

@@ -8,10 +8,10 @@
       <a href="/" rel="index up">Home</a>
     </span>
 
-    {% if page.section -%}
-      {%- assign section = site.data.sections[page.section] -%}
+    {% if include.page.section -%}
+      {%- assign section = site.data.sections[include.page.section] -%}
       {% for item in section.breadcrumbs %}
-        {%- if item.url == page.url -%}
+        {%- if item.url == include.page.url -%}
           {% assign page_title = item.title %}
           {% assign page_nav = item.nav %}
           {% break %}
@@ -33,7 +33,7 @@
       {{ separator }}
 
       <span class="breadcrumb">
-        <a href="{{ page.url }}" aria-current="page">{{ page_title }}</a>
+        <a href="{{ include.page.url }}" aria-current="page">{{ page_title }}</a>
       </span>
     {% endif %}
   </nav>

_layouts/base.html

@@ -8,7 +8,7 @@
   {% include site/nav.html %}
 </header>
 
-{% include site/breadcrumbs.html %}
+{% include site/breadcrumbs.html page=page %}
 
 <main>
   {{ content }}

_style_guide/components/breadcrumbs.html

@@ -0,0 +1,37 @@
+---
+title: Breadcrumbs
+type: components
+module: _includes/site/breadcrumbs.html
+
+examples:
+  community:
+    section: community
+    title: Foo Bar
+    url: /foo/bar
+  community_main:
+    section: community
+    title: Foo Bar
+    url: /community/
+  archive:
+    section: archive
+    title: Foo Bar
+    url: /foo/bar
+  no_section:
+    title: Foo Bar
+    url: /foo/bar
+---
+<strong>Basic</strong>
+{% assign example = page.examples.community %}
+{% include site/breadcrumbs.html page=example %}
+
+<strong>Section Main</strong>
+{% assign example = page.examples.community_main %}
+{% include site/breadcrumbs.html page=example %}
+
+<strong>Non-link Item</strong>
+{% assign example = page.examples.archive %}
+{% include site/breadcrumbs.html page=example %}
+
+<strong>No section</strong>
+{% assign example = page.examples.no_section %}
+{% include site/breadcrumbs.html page=example %}