sharpetronics/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-10-31 00:04:27 -04:00
Code Issues Projects Releases Wiki Activity

Add dropdown menu example to navbar docs

Browse Source
This commit is contained in:
Mark Otto 2016-05-13 08:19:16 -07:00
parent c6c0522598
commit 05bdecd0b0
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/components/navbar.md
View File

@ -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