add note to components about nav list nesting

2 files changed, 14 insertions, 18 deletions

diff --git a/docs/components.html b/docs/components.html
index d70218163f..825e9fdac0 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -833,18 +833,16 @@
   </div>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-list"&gt;
-  &lt;li class="nav-header"&gt;
-    List header
-  &lt;/li&gt;
-  &lt;li class="active"&gt;
-    &lt;a href="#"&gt;Home&lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href="#"&gt;Library&lt;/a&gt;
-  &lt;/li&gt;
+  &lt;li class="nav-header"&gt;List header&lt;/li&gt;
+  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
   ...
 &lt;/ul&gt;
 </pre>
+  <p>
+    <span class="label label-info">Note</span>
+    For nesting within a nav list, include <code>class="nav nav-list"</code> on any nested <code>&lt;ul&gt;</code>.
+  </p>
 
   <h3>Horizontal dividers</h3>
   <p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index f84a686ca0..1e6d6fe415 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -756,18 +756,16 @@
   </div>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-list"&gt;
-  &lt;li class="nav-header"&gt;
-    {{_i}}List header{{/i}}
-  &lt;/li&gt;
-  &lt;li class="active"&gt;
-    &lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href="#"&gt;{{_i}}Library{{/i}}&lt;/a&gt;
-  &lt;/li&gt;
+  &lt;li class="nav-header"&gt;{{_i}}List header{{/i}}&lt;/li&gt;
+  &lt;li class="active"&gt;&lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;{{_i}}Library{{/i}}&lt;/a&gt;&lt;/li&gt;
   ...
 &lt;/ul&gt;
 </pre>
+  <p>
+    <span class="label label-info">{{_i}}Note{{/i}}</span>
+    {{_i}}For nesting within a nav list, include <code>class="nav nav-list"</code> on any nested <code>&lt;ul&gt;</code>.{{/i}}
+  </p>
 
   <h3>{{_i}}Horizontal dividers{{/i}}</h3>
   <p>{{_i}}Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:{{/i}}</p>