mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-14 17:44:15 +02:00
Code Issues Releases Wiki Activity

Docs unordered lists dropdowns (#28591)

Browse Source 
Replace snippets and examples in dropdown docs to use semantic `ul` and `li` elements.
This commit is contained in:
Katherine Shaw
2019-05-09 01:19:32 -07:00
committed by XhmikosR
parent bc012957b5
commit a5d7dff164
2 changed files with 272 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

522
site/content/docs/4.3/components/dropdowns.md
View File

@@ -24,7 +24,7 @@ However, Bootstrap does add built-in support for most standard keyboard menu int
## Examples ## Examples
Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs. Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs. The examples shown here use semantic `<ul>` elements where appropriate, but custom markup is supported.
### Single button ### Single button
@@ -35,11 +35,11 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
Dropdown button Dropdown button
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
</div> </ul>
</div> </div>
{{< /example >}} {{< /example >}}
@@ -51,11 +51,11 @@ And with `<a>` elements:
Dropdown link Dropdown link
</a> </a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
</div> </ul>
</div> </div>
{{< /example >}} {{< /example >}}
@@ -64,63 +64,63 @@ The best part is you can do this with any button variant, too:
<div class="bd-example"> <div class="bd-example">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary</button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Secondary</button> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Secondary</button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success</button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info</button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning</button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger</button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>
@@ -130,13 +130,13 @@ The best part is you can do this with any button variant, too:
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action Action
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div> </div>
{{< /highlight >}} {{< /highlight >}}
@@ -152,78 +152,78 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>
@@ -234,13 +234,13 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div> </div>
{{< /highlight >}} {{< /highlight >}}
@@ -254,26 +254,26 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button Large button
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group ml-2"> <div class="btn-group ml-2">
<button type="button" class="btn btn-lg btn-secondary">Large split button</button> <button type="button" class="btn btn-lg btn-secondary">Large split button</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
@@ -281,26 +281,26 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button Small button
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group ml-2"> <div class="btn-group ml-2">
<button type="button" class="btn btn-sm btn-secondary">Small split button</button> <button type="button" class="btn btn-sm btn-secondary">Small split button</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
</div> </div>
@@ -311,9 +311,9 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button Large button
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
... ...
</div> </ul>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button"> <button class="btn btn-secondary btn-lg" type="button">
@@ -322,9 +322,9 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
... ...
</div> </ul>
</div> </div>
<!-- Small button groups (default and split) --> <!-- Small button groups (default and split) -->
@@ -332,9 +332,9 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button Small button
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
... ...
</div> </ul>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-secondary btn-sm" type="button"> <button class="btn btn-secondary btn-sm" type="button">
@@ -343,9 +343,9 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
... ...
</div> </ul>
</div> </div>
{{< /highlight >}} {{< /highlight >}}
@@ -360,13 +360,13 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropup Dropup
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div> </div>
<div class="btn-group dropup"> <div class="btn-group dropup">
<button type="button" class="btn btn-secondary"> <button type="button" class="btn btn-secondary">
@@ -375,13 +375,13 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div> </div>
</div> </div>
@@ -391,9 +391,9 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropup Dropup
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<!-- Dropdown menu links --> <!-- Dropdown menu links -->
</div> </ul>
</div> </div>
<!-- Split dropup button --> <!-- Split dropup button -->
@@ -404,9 +404,9 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<!-- Dropdown menu links --> <!-- Dropdown menu links -->
</div> </ul>
</div> </div>
{{< /highlight >}} {{< /highlight >}}
@@ -419,13 +419,13 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropright Dropright
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div> </div>
<div class="btn-group dropright"> <div class="btn-group dropright">
<button type="button" class="btn btn-secondary"> <button type="button" class="btn btn-secondary">
@@ -434,13 +434,13 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span> <span class="sr-only">Toggle Dropright</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div> </div>
</div> </div>
@@ -450,9 +450,9 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropright Dropright
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<!-- Dropdown menu links --> <!-- Dropdown menu links -->
</div> </ul>
</div> </div>
<!-- Split dropright button --> <!-- Split dropright button -->
@@ -463,9 +463,9 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span> <span class="sr-only">Toggle Dropright</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<!-- Dropdown menu links --> <!-- Dropdown menu links -->
</div> </ul>
</div> </div>
{{< /highlight >}} {{< /highlight >}}
@@ -478,26 +478,26 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropleft Dropleft
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<div class="btn-group dropleft" role="group"> <div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span> <span class="sr-only">Toggle Dropleft</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div> </div>
<button type="button" class="btn btn-secondary"> <button type="button" class="btn btn-secondary">
Split dropleft Split dropleft
@@ -511,9 +511,9 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropleft Dropleft
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<!-- Dropdown menu links --> <!-- Dropdown menu links -->
</div> </ul>
</div> </div>
<!-- Split dropleft button --> <!-- Split dropleft button -->
@@ -522,9 +522,9 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span> <span class="sr-only">Toggle Dropleft</span>
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<!-- Dropdown menu links --> <!-- Dropdown menu links -->
</div> </ul>
</div> </div>
<button type="button" class="btn btn-secondary"> <button type="button" class="btn btn-secondary">
Split dropleft Split dropleft
@@ -541,23 +541,23 @@ Historically dropdown menu contents *had* to be links, but that's no longer the
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2"> <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button> <li><button class="dropdown-item" type="button">Action</button></li>
<button class="dropdown-item" type="button">Another action</button> <li><button class="dropdown-item" type="button">Another action</button></li>
<button class="dropdown-item" type="button">Something else here</button> <li><button class="dropdown-item" type="button">Something else here</button></li>
</div> </ul>
</div> </div>
{{< /example >}} {{< /example >}}
You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities. You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities.
{{< example >}} {{< example >}}
<div class="dropdown-menu"> <ul class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span> <li><span class="dropdown-item-text">Dropdown item text</span></li>
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
</div> </ul>
{{< /example >}} {{< /example >}}
### Active ### Active
@@ -565,11 +565,11 @@ You can also create non-interactive dropdown items with `.dropdown-item-text`. F
Add `.active` to items in the dropdown to **style them as active**. Add `.active` to items in the dropdown to **style them as active**.
{{< example >}} {{< example >}}
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a> <li><a class="dropdown-item" href="#">Regular link</a></li>
<a class="dropdown-item active" href="#">Active link</a> <li><a class="dropdown-item active" href="#">Active link</a></li>
<a class="dropdown-item" href="#">Another link</a> <li><a class="dropdown-item" href="#">Another link</a></li>
</div> </ul>
{{< /example >}} {{< /example >}}
### Disabled ### Disabled
@@ -577,11 +577,11 @@ Add `.active` to items in the dropdown to **style them as active**.
Add `.disabled` to items in the dropdown to **style them as disabled**. Add `.disabled` to items in the dropdown to **style them as disabled**.
{{< example >}} {{< example >}}
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a> <li><a class="dropdown-item" href="#">Regular link</a></li>
<a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a> <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
<a class="dropdown-item" href="#">Another link</a> <li><a class="dropdown-item" href="#">Another link</a></li>
</div> </ul>
{{< /example >}} {{< /example >}}
## Menu alignment ## Menu alignment
@@ -597,11 +597,11 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Right-aligned menu Right-aligned menu
</button> </button>
<div class="dropdown-menu dropdown-menu-right"> <ul class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button> <li><button class="dropdown-item" type="button">Action</button></li>
<button class="dropdown-item" type="button">Another action</button> <li><button class="dropdown-item" type="button">Another action</button></li>
<button class="dropdown-item" type="button">Something else here</button> <li><button class="dropdown-item" type="button">Something else here</button></li>
</div> </ul>
</div> </div>
{{< /example >}} {{< /example >}}
@@ -616,11 +616,11 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen Left-aligned but right aligned when large screen
</button> </button>
<div class="dropdown-menu dropdown-menu-lg-right"> <ul class="dropdown-menu dropdown-menu-lg-right">
<button class="dropdown-item" type="button">Action</button> <li><button class="dropdown-item" type="button">Action</button></li>
<button class="dropdown-item" type="button">Another action</button> <li><button class="dropdown-item" type="button">Another action</button></li>
<button class="dropdown-item" type="button">Something else here</button> <li><button class="dropdown-item" type="button">Something else here</button></li>
</div> </ul>
</div> </div>
{{< /example >}} {{< /example >}}
@@ -631,11 +631,11 @@ To align **left** the dropdown menu with the given breakpoint or larger, add `.d
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen Right-aligned but left aligned when large screen
</button> </button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left"> <ul class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<button class="dropdown-item" type="button">Action</button> <li><button class="dropdown-item" type="button">Action</button></li>
<button class="dropdown-item" type="button">Another action</button> <li><button class="dropdown-item" type="button">Another action</button></li>
<button class="dropdown-item" type="button">Something else here</button> <li><button class="dropdown-item" type="button">Something else here</button></li>
</div> </ul>
</div> </div>
{{< /example >}} {{< /example >}}
@@ -648,11 +648,11 @@ Note that you don't need to add a `data-display="static"` attribute to dropdown
Add a header to label sections of actions in any dropdown menu. Add a header to label sections of actions in any dropdown menu.
{{< example >}} {{< example >}}
<div class="dropdown-menu"> <ul class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6> <li><h6 class="dropdown-header">Dropdown header</h6></li>
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
</div> </ul>
{{< /example >}} {{< /example >}}
### Dividers ### Dividers
@@ -660,13 +660,13 @@ Add a header to label sections of actions in any dropdown menu.
Separate groups of related menu items with a divider. Separate groups of related menu items with a divider.
{{< example >}} {{< example >}}
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
{{< /example >}} {{< /example >}}
### Text ### Text
@@ -747,24 +747,24 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-expanded="false" data-offset="10,20"> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
Offset Offset
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOffset"> <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
</div> </ul>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-secondary">Reference</button> <button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-expanded="false" data-reference="parent"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuReference"> <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Separated link</a> <li><a class="dropdown-item" href="#">Separated link</a></li>
</div> </ul>
</div> </div>
</div> </div>
{{< /example >}} {{< /example >}}
@@ -786,9 +786,9 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
<button id="dLabel" type="button" data-toggle="dropdown" aria-expanded="false"> <button id="dLabel" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger Dropdown trigger
</button> </button>
<div class="dropdown-menu" aria-labelledby="dLabel"> <ul class="dropdown-menu" aria-labelledby="dLabel">
... ...
</div> </ul>
</div> </div>
{{< /highlight >}} {{< /highlight >}}

22
site/content/docs/4.3/components/navbar.md
View File

@@ -54,12 +54,12 @@ Here's an example of all the sub-components included in a responsive light-theme
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</a> </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<div class="dropdown-divider"></div> <li><hr class="dropdown-divider"></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
</div> </ul>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
@@ -185,11 +185,11 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link Dropdown link
</a> </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a> <li><a class="dropdown-item" href="#">Action</a></li>
<a class="dropdown-item" href="#">Another action</a> <li><a class="dropdown-item" href="#">Another action</a></li>
<a class="dropdown-item" href="#">Something else here</a> <li><a class="dropdown-item" href="#">Something else here</a></li>
</div> </ul>
</li> </li>
</ul> </ul>
</div> </div>