clear up and split out breadcrumb examples

diff --git a/docs/components/breadcrumb.md b/docs/components/breadcrumb.md
index 204a60c81e750e30cb6ab86831a73d98e5396112..40d407ddc5d8a3e3a3e4d2ef439ce7ce45310a13 100644 (file)
--- a/docs/components/breadcrumb.md
+++ b/docs/components/breadcrumb.md
@@ -4,11 +4,7 @@ title: Breadcrumb
 group: components
 ---
 
-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).
-
-Works fine with or without the usage of list markup.
+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).
 
 {% 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 -->
-<div class="breadcrumb">
+{% endexample %}
+
+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 %}