diff options
| author | Mark Otto <[email protected]> | 2016-05-13 08:19:16 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-05-13 08:19:16 -0700 |
| commit | 05bdecd0b09a007ae949f49fdff9006650c06969 (patch) | |
| tree | 387da20459e294267cbf3b0663b238f64bb6baa8 | |
| parent | c6c0522598037fcdeb04dfa376910a7cb5fa0fa8 (diff) | |
| download | bootstrap-05bdecd0b09a007ae949f49fdff9006650c06969.tar.xz bootstrap-05bdecd0b09a007ae949f49fdff9006650c06969.zip | |
Add dropdown menu example to navbar docs
| -rw-r--r-- | docs/components/navbar.md | 28 |
1 files changed, 28 insertions, 0 deletions
diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 5f7f36634..ea5a36106 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 |