From: Mark Otto <markdotto@gmail.com>
Date: Fri, 13 May 2016 15:19:16 +0000 (-0700)
Subject: Add dropdown menu example to navbar docs
X-Git-Tag: v4.0.0-alpha.5~4^2~19
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=05bdecd0b09a007ae949f49fdff9006650c06969;p=thirdparty%2Fbootstrap.git

Add dropdown menu example to navbar docs
---

diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 5f7f366344..ea5a361063 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -107,6 +107,34 @@ And because we use classes for our navs, you can avoid the list-based approach e
 </nav>
 {% endexample %}
 
+You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <ul class="nav navbar-nav">
+    <li class="nav-item active">
+      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Features</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Pricing</a>
+    </li>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-target="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        Dropdown link
+      </a>
+      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+      </div>
+    </li>
+  </ul>
+</nav>
+{% endexample %}
+
 
 ## Color schemes