diff --git a/docs/base-css.html b/docs/base-css.html
index 9491f40aab..8d6c56701d 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1516,11 +1516,12 @@
     </div>
     <div class="span3">
       <p>Or, use them in navigation.</p>
-      <div class="well side-nav">
-        <ul class="nav-group">
-          <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
-          <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li>
-          <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li>
+      <div class="well" style="padding: 8px 0;">
+        <ul class="nav list">
+          <li class="nav-header">List header</li>
+          <li class="active"><a href="#"><i class="home"></i> Home</a></li>
+          <li><a href="#"><i class="download"></i> Downloads</a></li>
+          <li><a href="#"><i class="film"></i> Movies</a></li>
         </ul>
       </div>
     </div>
diff --git a/docs/components.html b/docs/components.html
index fa3dc5a20b..08a1a7b574 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -506,7 +506,35 @@
 </pre>
     </div>
   </div>
-
+  <div class="row">
+    <div class="span4">
+      <h3>Sidebar navigation with icon</h3>
+      <div class="well" style="padding: 8px 0;">
+        <ul class="nav list">
+          <li class="nav-header">List header</li>
+          <li class="active"><a href="#"><i class="home"></i> Home</a></li>
+          <li><a href="#"><i class="download"></i> Downloads</a></li>
+          <li><a href="#"><i class="film"></i> Movies</a></li>
+          <li><a href="#"><i class="picture"></i> Picture</a></li>
+          <li class="nav-header">Another list header</li>
+          <li><a href="#"><i class="user"></i> Profile</a></li>
+          <li><a href="#"><i class="asterisk"></i> Settings</a></li>
+        </ul>
+      </div> <!-- /well -->
+    </div>
+    <div class="span8">
+      <h3>Simple markup</h3>
+<pre class="prettyprint linenums">
+&lt;ul class="nav list"&gt;
+  &lt;li class="nav-header"&gt;List header&lt;/li&gt;
+  &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="home"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="download"&gt;&lt;/i&gt; Downloads&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="film"&gt;&lt;/i&gt; Movies&lt;/a&gt;&lt;/li&gt;
+  ...
+&lt;/ul&gt;
+</pre>
+    </div>
+  </div>
 
   <h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2>
   <div class="row">