aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--site/content/docs/4.3/components/dropdowns.md522
-rw-r--r--site/content/docs/4.3/components/navbar.md22
2 files changed, 272 insertions, 272 deletions
diff --git a/site/content/docs/4.3/components/dropdowns.md b/site/content/docs/4.3/components/dropdowns.md
index 9bc0f4a99..4bd08f5b0 100644
--- a/site/content/docs/4.3/components/dropdowns.md
+++ b/site/content/docs/4.3/components/dropdowns.md
@@ -24,7 +24,7 @@ However, Bootstrap does add built-in support for most standard keyboard menu int
## 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
@@ -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">
Dropdown button
</button>
- <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
- <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>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ </ul>
</div>
{{< /example >}}
@@ -51,11 +51,11 @@ And with `<a>` elements:
Dropdown link
</a>
- <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
- <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>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ </ul>
</div>
{{< /example >}}
@@ -64,63 +64,63 @@ The best part is you can do this with any button variant, too:
<div class="bd-example">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Secondary</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
</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">
Action
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div>
{{< /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">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
<div class="btn-group">
<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">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
<div class="btn-group">
<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">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
<div class="btn-group">
<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">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
<div class="btn-group">
<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">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
<div class="btn-group">
<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">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
</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">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div>
{{< /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">
Large button
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
<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 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
</div><!-- /btn-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">
Small button
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
<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 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</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">
Large button
</button>
- <div class="dropdown-menu">
+ <ul class="dropdown-menu">
...
- </div>
+ </ul>
</div>
<div class="btn-group">
<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">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu">
+ <ul class="dropdown-menu">
...
- </div>
+ </ul>
</div>
<!-- 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">
Small button
</button>
- <div class="dropdown-menu">
+ <ul class="dropdown-menu">
...
- </div>
+ </ul>
</div>
<div class="btn-group">
<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">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu">
+ <ul class="dropdown-menu">
...
- </div>
+ </ul>
</div>
{{< /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">
Dropup
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div>
<div class="btn-group dropup">
<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">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</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">
Dropup
</button>
- <div class="dropdown-menu">
+ <ul class="dropdown-menu">
<!-- Dropdown menu links -->
- </div>
+ </ul>
</div>
<!-- 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">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu">
+ <ul class="dropdown-menu">
<!-- Dropdown menu links -->
- </div>
+ </ul>
</div>
{{< /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">
Dropright
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div>
<div class="btn-group dropright">
<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">
<span class="sr-only">Toggle Dropright</span>
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</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">
Dropright
</button>
- <div class="dropdown-menu">
+ <ul class="dropdown-menu">
<!-- Dropdown menu links -->
- </div>
+ </ul>
</div>
<!-- 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">
<span class="sr-only">Toggle Dropright</span>
</button>
- <div class="dropdown-menu">
+ <ul class="dropdown-menu">
<!-- Dropdown menu links -->
- </div>
+ </ul>
</div>
{{< /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">
Dropleft
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div>
<div class="btn-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">
<span class="sr-only">Toggle Dropleft</span>
</button>
- <div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div>
<button type="button" class="btn btn-secondary">
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">
Dropleft
</button>
- <div class="dropdown-menu">
+ <ul class="dropdown-menu">
<!-- Dropdown menu links -->
- </div>
+ </ul>
</div>
<!-- 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">
<span class="sr-only">Toggle Dropleft</span>
</button>
- <div class="dropdown-menu">
+ <ul class="dropdown-menu">
<!-- Dropdown menu links -->
- </div>
+ </ul>
</div>
<button type="button" class="btn btn-secondary">
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">
Dropdown
</button>
- <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
- <button class="dropdown-item" type="button">Action</button>
- <button class="dropdown-item" type="button">Another action</button>
- <button class="dropdown-item" type="button">Something else here</button>
- </div>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
+ <li><button class="dropdown-item" type="button">Action</button></li>
+ <li><button class="dropdown-item" type="button">Another action</button></li>
+ <li><button class="dropdown-item" type="button">Something else here</button></li>
+ </ul>
</div>
{{< /example >}}
You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities.
{{< example >}}
-<div class="dropdown-menu">
- <span class="dropdown-item-text">Dropdown item text</span>
- <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>
+<ul class="dropdown-menu">
+ <li><span class="dropdown-item-text">Dropdown item text</span></li>
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+</ul>
{{< /example >}}
### 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**.
{{< example >}}
-<div class="dropdown-menu">
- <a class="dropdown-item" href="#">Regular link</a>
- <a class="dropdown-item active" href="#">Active link</a>
- <a class="dropdown-item" href="#">Another link</a>
-</div>
+<ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Regular link</a></li>
+ <li><a class="dropdown-item active" href="#">Active link</a></li>
+ <li><a class="dropdown-item" href="#">Another link</a></li>
+</ul>
{{< /example >}}
### 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**.
{{< example >}}
-<div class="dropdown-menu">
- <a class="dropdown-item" href="#">Regular link</a>
- <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
- <a class="dropdown-item" href="#">Another link</a>
-</div>
+<ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Regular link</a></li>
+ <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
+ <li><a class="dropdown-item" href="#">Another link</a></li>
+</ul>
{{< /example >}}
## 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">
Right-aligned menu
</button>
- <div class="dropdown-menu dropdown-menu-right">
- <button class="dropdown-item" type="button">Action</button>
- <button class="dropdown-item" type="button">Another action</button>
- <button class="dropdown-item" type="button">Something else here</button>
- </div>
+ <ul class="dropdown-menu dropdown-menu-right">
+ <li><button class="dropdown-item" type="button">Action</button></li>
+ <li><button class="dropdown-item" type="button">Another action</button></li>
+ <li><button class="dropdown-item" type="button">Something else here</button></li>
+ </ul>
</div>
{{< /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">
Left-aligned but right aligned when large screen
</button>
- <div class="dropdown-menu dropdown-menu-lg-right">
- <button class="dropdown-item" type="button">Action</button>
- <button class="dropdown-item" type="button">Another action</button>
- <button class="dropdown-item" type="button">Something else here</button>
- </div>
+ <ul class="dropdown-menu dropdown-menu-lg-right">
+ <li><button class="dropdown-item" type="button">Action</button></li>
+ <li><button class="dropdown-item" type="button">Another action</button></li>
+ <li><button class="dropdown-item" type="button">Something else here</button></li>
+ </ul>
</div>
{{< /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">
Right-aligned but left aligned when large screen
</button>
- <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
- <button class="dropdown-item" type="button">Action</button>
- <button class="dropdown-item" type="button">Another action</button>
- <button class="dropdown-item" type="button">Something else here</button>
- </div>
+ <ul class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
+ <li><button class="dropdown-item" type="button">Action</button></li>
+ <li><button class="dropdown-item" type="button">Another action</button></li>
+ <li><button class="dropdown-item" type="button">Something else here</button></li>
+ </ul>
</div>
{{< /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.
{{< example >}}
-<div class="dropdown-menu">
- <h6 class="dropdown-header">Dropdown header</h6>
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
-</div>
+<ul class="dropdown-menu">
+ <li><h6 class="dropdown-header">Dropdown header</h6></li>
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+</ul>
{{< /example >}}
### 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.
{{< example >}}
-<div class="dropdown-menu">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
-</div>
+<ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+</ul>
{{< /example >}}
### 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">
Offset
</button>
- <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
- <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>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ </ul>
</div>
<div class="btn-group">
<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">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
- <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 class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
</div>
</div>
{{< /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">
Dropdown trigger
</button>
- <div class="dropdown-menu" aria-labelledby="dLabel">
+ <ul class="dropdown-menu" aria-labelledby="dLabel">
...
- </div>
+ </ul>
</div>
{{< /highlight >}}
diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md
index 66a70c7a2..2861be667 100644
--- a/site/content/docs/4.3/components/navbar.md
+++ b/site/content/docs/4.3/components/navbar.md
@@ -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">
Dropdown
</a>
- <div class="dropdown-menu" aria-labelledby="navbarDropdown">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Something else here</a>
- </div>
+ <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ </ul>
</li>
<li class="nav-item">
<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">
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>
+ <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ </ul>
</li>
</ul>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 06:27:52 +0000