updated docs: breadcrumb basic and navbar style variant #573

Author: gselderslaghs

src/breadcrumbs.html

@@ -13,27 +13,56 @@
           <div class="col s12 m8 offset-m1 xl7 offset-xl1">
             <!--  Collections Section  -->
             <div id="basic" class="section scrollspy">
-              <div class="row">
-                <div class="col s12">
-                  <p class="caption">Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content.</p>
-                  <h3 class="header">Basic</h3>
+                <div class="row">
+                    <div class="col s12">
+                        <p class="caption">Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content.</p>
+                        <h3 class="header">Basic</h3>
 
-                  <nav>
-                    <div class="nav-wrapper">
-                      <div class="col s12">
-                        <a href="#!" class="breadcrumb">First</a>
-                        <a href="#!" class="breadcrumb">Second</a>
-                        <a href="#!" class="breadcrumb">Third</a>
-                      </div>
+                        <nav class="breadcrumb-wrapper">
+                            <div class="col s12">
+                                <a href="#!" class="breadcrumb">First</a>
+                                <a href="#!" class="breadcrumb">Second</a>
+                                <a href="#!" class="breadcrumb">Third</a>
+                            </div>
+                        </nav>
+
+                        <pre style="padding-top: 0px">
+              <span class="copyMessage">Copied!</span>
+              <i class="material-icons copyButton">content_copy</i>
+              <code class="language-html copiedText">
+<xmp>
+<nav class="breadcrumb-wrapper">
+    <div class="col s12">
+      <a href="#!" class="breadcrumb">First</a>
+      <a href="#!" class="breadcrumb">Second</a>
+      <a href="#!" class="breadcrumb">Third</a>
+    </div>
+</nav>
+</xmp>
+              </code>
+            </pre>
                     </div>
-                  </nav>
+                </div>
+                <div class="row">
+                    <div class="col s12">
+                        <h3 class="header">Navbar style</h3>
+
+                        <nav class="navbar breadcrumb-wrapper">
+                            <div class="nav-wrapper">
+                                <div class="col s12">
+                                    <a href="#!" class="breadcrumb">First</a>
+                                    <a href="#!" class="breadcrumb">Second</a>
+                                    <a href="#!" class="breadcrumb">Third</a>
+                                </div>
+                            </div>
+                        </nav>
 
-                  <pre style="padding-top: 0px">
+                        <pre style="padding-top: 0px">
               <span class="copyMessage">Copied!</span>
               <i class="material-icons copyButton">content_copy</i>
               <code class="language-html copiedText">
 <xmp>
-<nav>
+<nav class="breadcrumb-wrapper">
   <div class="nav-wrapper">
     <div class="col s12">
       <a href="#!" class="breadcrumb">First</a>
@@ -45,8 +74,8 @@ <h3 class="header">Basic</h3>
 </xmp>
               </code>
             </pre>
+                    </div>
                 </div>
-              </div>
             </div>
             <!-- End collections -->
           </div>