#2764: add disabled styles to navs and dropdowns

1 files changed, 18 insertions, 1 deletions

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 09e77724d..1c33073a8 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -37,7 +37,7 @@
 
 <!-- Dropdowns
 ================================================== -->
-<section id="Dropdowns">
+<section id="dropdowns">
   <div class="page-header">
     <h1>{{_i}}Dropdown menus{{/i}} <small>{{_i}}Dropdown and dropup menus for contextual actions{{/i}}</small></h1>
   </div>
@@ -578,6 +578,23 @@
 &lt;/ul&gt;
 </pre>
 
+  <h3>{{_i}}Disabled state{{/i}}</h3>
+  <p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.{{/i}}</p>
+  <div class="bs-docs-example">
+    <ul class="nav nav-pills">
+      <li><a href="#">{{_i}}Clickable link{{/i}}</a></li>
+      <li><a href="#">{{_i}}Clickable link{{/i}}</a></li>
+      <li class="disabled"><a href="#">{{_i}}Disabled link{{/i}}</a></li>
+    </ul>
+  </div>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-pills"&gt;
+  ...
+  &lt;li class="disabled"&gt;&lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
+  ...
+&lt;/ul&gt;
+</pre>
+
   <h3>{{_i}}Component alignment{{/i}}</h3>
   <p>{{_i}}To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>