clear up and split out breadcrumb examples

docs/components/breadcrumb.md

@@ -4,11 +4,7 @@ title: Breadcrumb
 group: components
 ---
 
-Indicate the current page's location within a navigational hierarchy.
+Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
-
-Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
-
-Works fine with or without the usage of list markup.
 
 {% example html %}
 <ol class="breadcrumb">
@@ -23,11 +19,15 @@ Works fine with or without the usage of list markup.
   <li class="breadcrumb-item"><a href="#">Library</a></li>
   <li class="breadcrumb-item active">Data</li>
 </ol>
-<!-- Or use a div instead of a list -->
+{% endexample %}
-<div class="breadcrumb">
+
+Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup.
+
+{% example html %}
+<nav class="breadcrumb">
   <a class="breadcrumb-item" href="#">Home</a>
   <a class="breadcrumb-item" href="#">Library</a>
   <a class="breadcrumb-item" href="#">Data</a>
   <span class="breadcrumb-item active">Bootstrap</span>
-</div>
+</nav>
 {% endexample %}