rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Remove confusing unnecessary id/aria-labelledby for dropdown menus (#36487)

Browse Source 
see https://github.com/twbs/bootstrap/discussions/35755

Note that even the APG guide for disclosure widgets doesn't use this optional "nice-to-have" extra bit https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ (though they do use `aria-controls`, which in most current browser/AT combos is borked though)
This commit is contained in:
Patrick H. Lauke 2022-06-03 11:18:22 +01:00 committed by GitHub
parent 3102b4a3e9
commit 8965b11dd5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 146 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
js/tests/visual/dropdown.html
View File

@ -28,8 +28,8 @@
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -50,8 +50,8 @@
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown2"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -137,10 +137,10 @@
</div> </div>
</div> </div>
<div class="btn-group dropend"> <div class="btn-group dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropend Dropend
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuRight"> <div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button> <button class="dropdown-item" type="button">Something else here</button>
@ -159,10 +159,10 @@
</div> </div>
</div> </div>
<div class="btn-group dropstart"> <div class="btn-group dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenu" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart Dropstart
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropstartMenu"> <div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button> <button class="dropdown-item" type="button">Something else here</button>
@ -187,10 +187,10 @@
</div> </div>
<div class="col-sm-3 mt-4"> <div class="col-sm-3 mt-4">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Dropdown menu without Popper Dropdown menu without Popper
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>

4
js/tests/visual/scrollspy.html
View File

@ -24,8 +24,8 @@
<a class="nav-link" href="#mdo">@mdo</a> <a class="nav-link" href="#mdo">@mdo</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#one">One</a></li> <li><a class="dropdown-item" href="#one">One</a></li>
<li><a class="dropdown-item" href="#two">Two</a></li> <li><a class="dropdown-item" href="#two">Two</a></li>
<li><a class="dropdown-item" href="#three">Three</a></li> <li><a class="dropdown-item" href="#three">Three</a></li>

20
site/content/docs/5.2/components/button-group.md
View File

@ -173,10 +173,10 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
<button type="button" class="btn btn-primary">2</button> <button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </ul>
@ -204,10 +204,10 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<button type="button" class="btn btn-primary">Button</button> <button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button> <button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </ul>
@ -215,28 +215,28 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<button type="button" class="btn btn-primary">Button</button> <button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button> <button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </ul>
</div> </div>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </ul>
</div> </div>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </ul>

60
site/content/docs/5.2/components/dropdowns.md
View File

@ -30,10 +30,10 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
{{< example >}} {{< example >}}
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button Dropdown button
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -45,11 +45,11 @@ And with `<a>` elements:
{{< example >}} {{< example >}}
<div class="dropdown"> <div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link Dropdown link
</a> </a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -353,10 +353,10 @@ Opt into darker dropdowns to match a dark navbar or custom style by adding `.dro
{{< example >}} {{< example >}}
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button Dropdown button
</button> </button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2"> <ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item active" href="#">Action</a></li> <li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another 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><a class="dropdown-item" href="#">Something else here</a></li>
@ -378,10 +378,10 @@ And putting it to use in a navbar:
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown"> <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</a> </a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink"> <ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -406,10 +406,10 @@ Make the dropdown menu centered below the toggle with `.dropdown-center` on the
{{< example >}} {{< example >}}
<div class="dropdown-center"> <div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenterBtn" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropdown Centered dropdown
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownCenterBtn"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action two</a></li> <li><a class="dropdown-item" href="#">Action two</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li> <li><a class="dropdown-item" href="#">Action three</a></li>
@ -482,10 +482,10 @@ Make the dropup menu centered above the toggle with `.dropup-center` on the pare
{{< example >}} {{< example >}}
<div class="dropup-center dropup"> <div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenterBtn" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropup Centered dropup
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropupCenterBtn"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action two</a></li> <li><a class="dropdown-item" href="#">Action two</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li> <li><a class="dropdown-item" href="#">Action three</a></li>
@ -617,10 +617,10 @@ You can use `<a>` or `<button>` elements as dropdown items.
{{< example >}} {{< example >}}
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> <ul class="dropdown-menu">
<li><button class="dropdown-item" type="button">Action</button></li> <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">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li> <li><button class="dropdown-item" type="button">Something else here</button></li>
@ -728,10 +728,10 @@ Taking most of the options shown above, here's a small kitchen sink demo of vari
{{< example >}} {{< example >}}
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
@ -913,10 +913,10 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
{{< example >}} {{< example >}}
<div class="d-flex"> <div class="d-flex">
<div class="dropdown me-1"> <div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset Offset
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -924,10 +924,10 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
</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-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -944,10 +944,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
{{< example >}} {{< example >}}
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown Default dropdown
</button> </button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
@ -955,10 +955,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside Clickable outside
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
@ -966,10 +966,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside Clickable inside
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
@ -977,10 +977,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close Manual close
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li>
@ -1036,10 +1036,10 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown.
```html ```html
<div class="dropdown"> <div class="dropdown">
<button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger Dropdown trigger
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dLabel"> <ul class="dropdown-menu">
... ...
</ul> </ul>
</div> </div>

16
site/content/docs/5.2/components/navbar.md
View File

@ -52,10 +52,10 @@ Here's an example of all the sub-components included in a responsive light-theme
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</a> </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
@ -207,10 +207,10 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
<a class="nav-link" href="#">Pricing</a> <a class="nav-link" href="#">Pricing</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link Dropdown link
</a> </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -523,10 +523,10 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link Link
</a> </a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
@ -695,10 +695,10 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</a> </a>
<ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li> <li>

4
site/content/docs/5.2/components/offcanvas.md
View File

@ -66,10 +66,10 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div> </div>
<div class="dropdown mt-3"> <div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button Dropdown button
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>

36
site/content/docs/5.2/examples/cheatsheet-rtl/index.html
View File

@ -913,10 +913,10 @@ direction: rtl
{{< example show_markup="false" >}} {{< example show_markup="false" >}}
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSM" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
زر القائمة المنسدلة زر القائمة المنسدلة
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSM"> <ul class="dropdown-menu">
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@ -926,10 +926,10 @@ direction: rtl
</ul> </ul>
</div> </div>
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
زر القائمة المنسدلة زر القائمة المنسدلة
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <ul class="dropdown-menu">
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@ -939,10 +939,10 @@ direction: rtl
</ul> </ul>
</div> </div>
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLG" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
زر القائمة المنسدلة زر القائمة المنسدلة
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLG"> <ul class="dropdown-menu">
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@ -1026,10 +1026,10 @@ direction: rtl
{{< example show_markup="false" >}} {{< example show_markup="false" >}}
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
<div class="dropend"> <div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
زر القائمة المنسدلة لليسار زر القائمة المنسدلة لليسار
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton"> <ul class="dropdown-menu">
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@ -1039,10 +1039,10 @@ direction: rtl
</ul> </ul>
</div> </div>
<div class="dropup"> <div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
زر القائمة المنسدلة للأعلى زر القائمة المنسدلة للأعلى
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton"> <ul class="dropdown-menu">
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@ -1052,10 +1052,10 @@ direction: rtl
</ul> </ul>
</div> </div>
<div class="dropstart"> <div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
زر القائمة المنسدلة لليمين زر القائمة المنسدلة لليمين
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton"> <ul class="dropdown-menu">
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@ -1070,10 +1070,10 @@ direction: rtl
{{< example show_markup="false" >}} {{< example show_markup="false" >}}
<div class="btn-group"> <div class="btn-group">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownRightMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
قائمة منسدلة بمحاذاة نهاية الزر قائمة منسدلة بمحاذاة نهاية الزر
</button> </button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownRightMenuButton"> <ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@ -1230,10 +1230,10 @@ direction: rtl
<a class="nav-link" href="#">رابط</a> <a class="nav-link" href="#">رابط</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
قائمة منسدلة قائمة منسدلة
</a> </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
@ -1269,10 +1269,10 @@ direction: rtl
<a class="nav-link" href="#">رابط</a> <a class="nav-link" href="#">رابط</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
قائمة منسدلة قائمة منسدلة
</a> </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>

36
site/content/docs/5.2/examples/cheatsheet/index.html
View File

@ -912,10 +912,10 @@ body_class: "bg-light"
{{< example show_markup="false" >}} {{< example show_markup="false" >}}
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSM" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button Dropdown button
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSM"> <ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li> <li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
@ -925,10 +925,10 @@ body_class: "bg-light"
</ul> </ul>
</div> </div>
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button Dropdown button
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li> <li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
@ -938,10 +938,10 @@ body_class: "bg-light"
</ul> </ul>
</div> </div>
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLG" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button Dropdown button
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLG"> <ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li> <li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
@ -1025,10 +1025,10 @@ body_class: "bg-light"
{{< example show_markup="false" >}} {{< example show_markup="false" >}}
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
<div class="dropend"> <div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropend button Dropend button
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton"> <ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li> <li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
@ -1038,10 +1038,10 @@ body_class: "bg-light"
</ul> </ul>
</div> </div>
<div class="dropup"> <div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropup button Dropup button
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton"> <ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li> <li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
@ -1051,10 +1051,10 @@ body_class: "bg-light"
</ul> </ul>
</div> </div>
<div class="dropstart"> <div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart button Dropstart button
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton"> <ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li> <li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
@ -1069,10 +1069,10 @@ body_class: "bg-light"
{{< example show_markup="false" >}} {{< example show_markup="false" >}}
<div class="btn-group"> <div class="btn-group">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownRightMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
End-aligned menu End-aligned menu
</button> </button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownRightMenuButton"> <ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">Dropdown header</h6></li> <li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
@ -1229,10 +1229,10 @@ body_class: "bg-light"
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</a> </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
@ -1268,10 +1268,10 @@ body_class: "bg-light"
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</a> </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>

12
site/content/docs/5.2/examples/headers/index.html
View File

@ -137,10 +137,10 @@ body_class: ""
</form> </form>
<div class="dropdown text-end"> <div class="dropdown text-end">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a> </a>
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1"> <ul class="dropdown-menu text-small">
<li><a class="dropdown-item" href="#">New project...</a></li> <li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li> <li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li> <li><a class="dropdown-item" href="#">Profile</a></li>
@ -157,10 +157,10 @@ body_class: ""
<header class="py-3 mb-3 border-bottom"> <header class="py-3 mb-3 border-bottom">
<div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;"> <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
<div class="dropdown"> <div class="dropdown">
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink"> <ul class="dropdown-menu text-small shadow">
<li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li> <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
<li><a class="dropdown-item" href="#">Inventory</a></li> <li><a class="dropdown-item" href="#">Inventory</a></li>
<li><a class="dropdown-item" href="#">Customers</a></li> <li><a class="dropdown-item" href="#">Customers</a></li>
@ -177,10 +177,10 @@ body_class: ""
</form> </form>
<div class="flex-shrink-0 dropdown"> <div class="flex-shrink-0 dropdown">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a> </a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"> <ul class="dropdown-menu text-small shadow">
<li><a class="dropdown-item" href="#">New project...</a></li> <li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li> <li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li> <li><a class="dropdown-item" href="#">Profile</a></li>

4
site/content/docs/5.2/examples/navbar-bottom/index.html
View File

@ -28,8 +28,8 @@ title: Bottom navbar example
<a class="nav-link disabled">Disabled</a> <a class="nav-link disabled">Disabled</a>
</li> </li>
<li class="nav-item dropup"> <li class="nav-item dropup">
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropup</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropup</a>
<ul class="dropdown-menu" aria-labelledby="dropdown10"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>

12
site/content/docs/5.2/examples/navbars-offcanvas/index.html
View File

@ -26,10 +26,10 @@ extra_css:
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDarkDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</a> </a>
<ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDarkDropdown"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li> <li>
@ -68,10 +68,10 @@ extra_css:
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarLightDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</a> </a>
<ul class="dropdown-menu" aria-labelledby="offcanvasNavbarLightDropdown"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li> <li>
@ -110,10 +110,10 @@ extra_css:
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarLgDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</a> </a>
<ul class="dropdown-menu" aria-labelledby="offcanvasNavbarLgDropdown"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li> <li>

44
site/content/docs/5.2/examples/navbars/index.html
View File

@ -25,8 +25,8 @@ extra_css:
<a class="nav-link disabled">Disabled</a> <a class="nav-link disabled">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown01"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -82,8 +82,8 @@ extra_css:
<a class="nav-link disabled">Disabled</a> <a class="nav-link disabled">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown03"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -116,8 +116,8 @@ extra_css:
<a class="nav-link disabled">Disabled</a> <a class="nav-link disabled">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown04"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -150,8 +150,8 @@ extra_css:
<a class="nav-link disabled">Disabled</a> <a class="nav-link disabled">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown05"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -184,8 +184,8 @@ extra_css:
<a class="nav-link disabled">Disabled</a> <a class="nav-link disabled">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown06"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -218,8 +218,8 @@ extra_css:
<a class="nav-link disabled">Disabled</a> <a class="nav-link disabled">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdownXxl"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -252,8 +252,8 @@ extra_css:
<a class="nav-link disabled">Disabled</a> <a class="nav-link disabled">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown07"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -286,8 +286,8 @@ extra_css:
<a class="nav-link disabled">Disabled</a> <a class="nav-link disabled">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown07XL"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -323,8 +323,8 @@ extra_css:
<a class="nav-link disabled">Disabled</a> <a class="nav-link disabled">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown08"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -355,8 +355,8 @@ extra_css:
<a class="nav-link disabled">Disabled</a> <a class="nav-link disabled">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown09"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -388,8 +388,8 @@ extra_css:
<a class="nav-link disabled">Disabled</a> <a class="nav-link disabled">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown10"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>

4
site/content/docs/5.2/examples/offcanvas-navbar/index.html
View File

@ -31,8 +31,8 @@ aliases: "/docs/5.2/examples/offcanvas/"
<a class="nav-link" href="#">Switch account</a> <a class="nav-link" href="#">Switch account</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Settings</a> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Settings</a>
<ul class="dropdown-menu" aria-labelledby="dropdown01"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></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="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>

12
site/content/docs/5.2/examples/sidebars/index.html
View File

@ -110,11 +110,11 @@ body_class: ""
</ul> </ul>
<hr> <hr>
<div class="dropdown"> <div class="dropdown">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>mdo</strong> <strong>mdo</strong>
</a> </a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1"> <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<li><a class="dropdown-item" href="#">New project...</a></li> <li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li> <li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li> <li><a class="dropdown-item" href="#">Profile</a></li>
@ -166,11 +166,11 @@ body_class: ""
</ul> </ul>
<hr> <hr>
<div class="dropdown"> <div class="dropdown">
<a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>mdo</strong> <strong>mdo</strong>
</a> </a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"> <ul class="dropdown-menu text-small shadow">
<li><a class="dropdown-item" href="#">New project...</a></li> <li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li> <li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li> <li><a class="dropdown-item" href="#">Profile</a></li>
@ -215,10 +215,10 @@ body_class: ""
</li> </li>
</ul> </ul>
<div class="dropdown border-top"> <div class="dropdown border-top">
<a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle"> <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
</a> </a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3"> <ul class="dropdown-menu text-small shadow">
<li><a class="dropdown-item" href="#">New project...</a></li> <li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li> <li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li> <li><a class="dropdown-item" href="#">Profile</a></li>

8
site/layouts/partials/home/masthead-followup.html
View File

@ -243,10 +243,10 @@ $utilities: map-merge(
<p>Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding <code>data</code> attributes.</p> <p>Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding <code>data</code> attributes.</p>
<div class="p-4 mb-3 border rounded-3"> <div class="p-4 mb-3 border rounded-3">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdown"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li> <li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li> <li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li> <li><a class="dropdown-item" href="#">Dropdown item</a></li>
@ -255,10 +255,10 @@ $utilities: map-merge(
</div> </div>
{{ highlight (printf `<div class="dropdown"> {{ highlight (printf `<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdown"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li> <li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li> <li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li> <li><a class="dropdown-item" href="#">Dropdown item</a></li>