diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2022-06-03 13:18:22 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-06-03 13:18:22 +0300 |
commit | 8965b11dd5ec9f6d353c53b58e256880d6a96703 (patch) | |
tree | 03cd881cb6c7d1bb55c87e2a398c17936beb6a2b /site | |
parent | 3102b4a3e9a7af8737b5330ccf5c6879022577b4 (diff) |
Remove confusing unnecessary id/aria-labelledby for dropdown menus (#36487)
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)
Diffstat (limited to 'site')
13 files changed, 134 insertions, 134 deletions
diff --git a/site/content/docs/5.2/components/button-group.md b/site/content/docs/5.2/components/button-group.md index e72855d5a9..8f7d2d6a9e 100644 --- a/site/content/docs/5.2/components/button-group.md +++ b/site/content/docs/5.2/components/button-group.md @@ -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> <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 </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> </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> <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 </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> </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> <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 </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> </ul> </div> <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 </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> </ul> </div> <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 </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> </ul> diff --git a/site/content/docs/5.2/components/dropdowns.md b/site/content/docs/5.2/components/dropdowns.md index 8b8514b95b..ec7e584b5b 100644 --- a/site/content/docs/5.2/components/dropdowns.md +++ b/site/content/docs/5.2/components/dropdowns.md @@ -30,10 +30,10 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes. {{< example >}} <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 </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="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> @@ -45,11 +45,11 @@ And with `<a>` elements: {{< example >}} <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 </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="#">Another action</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 >}} <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 </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" href="#">Another action</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"> <ul class="navbar-nav"> <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 </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="#">Another action</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 >}} <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 </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 two</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 >}} <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 </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 two</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 >}} <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 </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">Another action</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 >}} <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 </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> @@ -913,10 +913,10 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo {{< example >}} <div class="d-flex"> <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 </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="#">Another action</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 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-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> </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="#">Another action</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 >}} <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 </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> @@ -955,10 +955,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop </div> <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 </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> @@ -966,10 +966,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop </div> <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 </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> @@ -977,10 +977,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop </div> <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 </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> @@ -1036,10 +1036,10 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown. ```html <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 </button> - <ul class="dropdown-menu" aria-labelledby="dLabel"> + <ul class="dropdown-menu"> ... </ul> </div> diff --git a/site/content/docs/5.2/components/navbar.md b/site/content/docs/5.2/components/navbar.md index 392531160d..c5f1fa389e 100644 --- a/site/content/docs/5.2/components/navbar.md +++ b/site/content/docs/5.2/components/navbar.md @@ -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> </li> <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 </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="#">Another action</a></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> </li> <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 </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="#">Another action</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> </li> <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 </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="#">Another action</a></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> </li> <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 </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="#">Another action</a></li> <li> diff --git a/site/content/docs/5.2/components/offcanvas.md b/site/content/docs/5.2/components/offcanvas.md index 00aec2d99f..cba75ac216 100644 --- a/site/content/docs/5.2/components/offcanvas.md +++ b/site/content/docs/5.2/components/offcanvas.md @@ -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. </div> <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 </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="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> diff --git a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html b/site/content/docs/5.2/examples/cheatsheet-rtl/index.html index 2a1db691cf..093554ebda 100644 --- a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.2/examples/cheatsheet-rtl/index.html @@ -913,10 +913,10 @@ direction: rtl {{< example show_markup="false" >}} <div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> <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> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSM"> + <ul class="dropdown-menu"> <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li> @@ -926,10 +926,10 @@ direction: rtl </ul> </div> <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> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <ul class="dropdown-menu"> <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li> @@ -939,10 +939,10 @@ direction: rtl </ul> </div> <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> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLG"> + <ul class="dropdown-menu"> <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></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" >}} <div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> <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> - <ul class="dropdown-menu" aria-labelledby="dropendMenuButton"> + <ul class="dropdown-menu"> <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li> @@ -1039,10 +1039,10 @@ direction: rtl </ul> </div> <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> - <ul class="dropdown-menu" aria-labelledby="dropupMenuButton"> + <ul class="dropdown-menu"> <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li> @@ -1052,10 +1052,10 @@ direction: rtl </ul> </div> <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> - <ul class="dropdown-menu" aria-labelledby="dropstartMenuButton"> + <ul class="dropdown-menu"> <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></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" >}} <div class="btn-group"> <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> - <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><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> </li> <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> - <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><hr class="dropdown-divider"></li> @@ -1269,10 +1269,10 @@ direction: rtl <a class="nav-link" href="#">رابط</a> </li> <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> - <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><hr class="dropdown-divider"></li> diff --git a/site/content/docs/5.2/examples/cheatsheet/index.html b/site/content/docs/5.2/examples/cheatsheet/index.html index afd66d4fa8..8bbd5dc261 100644 --- a/site/content/docs/5.2/examples/cheatsheet/index.html +++ b/site/content/docs/5.2/examples/cheatsheet/index.html @@ -912,10 +912,10 @@ body_class: "bg-light" {{< example show_markup="false" >}} <div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> <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 </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSM"> + <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> @@ -925,10 +925,10 @@ body_class: "bg-light" </ul> </div> <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 </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <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> @@ -938,10 +938,10 @@ body_class: "bg-light" </ul> </div> <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 </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLG"> + <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> @@ -1025,10 +1025,10 @@ body_class: "bg-light" {{< example show_markup="false" >}} <div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> <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 </button> - <ul class="dropdown-menu" aria-labelledby="dropendMenuButton"> + <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> @@ -1038,10 +1038,10 @@ body_class: "bg-light" </ul> </div> <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 </button> - <ul class="dropdown-menu" aria-labelledby="dropupMenuButton"> + <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> @@ -1051,10 +1051,10 @@ body_class: "bg-light" </ul> </div> <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 </button> - <ul class="dropdown-menu" aria-labelledby="dropstartMenuButton"> + <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> @@ -1069,10 +1069,10 @@ body_class: "bg-light" {{< example show_markup="false" >}} <div class="btn-group"> <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 </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><a class="dropdown-item" href="#">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> </li> <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 </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="#">Another action</a></li> <li><hr class="dropdown-divider"></li> @@ -1268,10 +1268,10 @@ body_class: "bg-light" <a class="nav-link" href="#">Link</a> </li> <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 </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="#">Another action</a></li> <li><hr class="dropdown-divider"></li> diff --git a/site/content/docs/5.2/examples/headers/index.html b/site/content/docs/5.2/examples/headers/index.html index 5ef2eef163..b8fc8b27b8 100644 --- a/site/content/docs/5.2/examples/headers/index.html +++ b/site/content/docs/5.2/examples/headers/index.html @@ -137,10 +137,10 @@ body_class: "" </form> <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"> </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="#">Settings</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"> <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;"> <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> </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" href="#">Inventory</a></li> <li><a class="dropdown-item" href="#">Customers</a></li> @@ -177,10 +177,10 @@ body_class: "" </form> <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"> </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="#">Settings</a></li> <li><a class="dropdown-item" href="#">Profile</a></li> diff --git a/site/content/docs/5.2/examples/navbar-bottom/index.html b/site/content/docs/5.2/examples/navbar-bottom/index.html index 1a6399975f..c0e859ad0c 100644 --- a/site/content/docs/5.2/examples/navbar-bottom/index.html +++ b/site/content/docs/5.2/examples/navbar-bottom/index.html @@ -28,8 +28,8 @@ title: Bottom navbar example <a class="nav-link disabled">Disabled</a> </li> <li class="nav-item dropup"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropup</a> - <ul class="dropdown-menu" aria-labelledby="dropdown10"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropup</a> + <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> diff --git a/site/content/docs/5.2/examples/navbars-offcanvas/index.html b/site/content/docs/5.2/examples/navbars-offcanvas/index.html index b08ed63391..9099dc93ac 100644 --- a/site/content/docs/5.2/examples/navbars-offcanvas/index.html +++ b/site/content/docs/5.2/examples/navbars-offcanvas/index.html @@ -26,10 +26,10 @@ extra_css: <a class="nav-link" href="#">Link</a> </li> <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 </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="#">Another action</a></li> <li> @@ -68,10 +68,10 @@ extra_css: <a class="nav-link" href="#">Link</a> </li> <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 </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="#">Another action</a></li> <li> @@ -110,10 +110,10 @@ extra_css: <a class="nav-link" href="#">Link</a> </li> <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 </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="#">Another action</a></li> <li> diff --git a/site/content/docs/5.2/examples/navbars/index.html b/site/content/docs/5.2/examples/navbars/index.html index f0a49c1d40..cc90b8ce09 100644 --- a/site/content/docs/5.2/examples/navbars/index.html +++ b/site/content/docs/5.2/examples/navbars/index.html @@ -25,8 +25,8 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown01"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <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> @@ -82,8 +82,8 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown03"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <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> @@ -116,8 +116,8 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown04"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <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> @@ -150,8 +150,8 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown05"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <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> @@ -184,8 +184,8 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown06"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <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> @@ -218,8 +218,8 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdownXxl"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <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> @@ -252,8 +252,8 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown07"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <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> @@ -286,8 +286,8 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown07XL"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <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> @@ -323,8 +323,8 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown08"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <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> @@ -355,8 +355,8 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown09"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <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> @@ -388,8 +388,8 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown10"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <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> diff --git a/site/content/docs/5.2/examples/offcanvas-navbar/index.html b/site/content/docs/5.2/examples/offcanvas-navbar/index.html index 667e73bb44..81c9bb4bbe 100644 --- a/site/content/docs/5.2/examples/offcanvas-navbar/index.html +++ b/site/content/docs/5.2/examples/offcanvas-navbar/index.html @@ -31,8 +31,8 @@ aliases: "/docs/5.2/examples/offcanvas/" <a class="nav-link" href="#">Switch account</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Settings</a> - <ul class="dropdown-menu" aria-labelledby="dropdown01"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Settings</a> + <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> diff --git a/site/content/docs/5.2/examples/sidebars/index.html b/site/content/docs/5.2/examples/sidebars/index.html index 33a80e1f8a..48889faccb 100644 --- a/site/content/docs/5.2/examples/sidebars/index.html +++ b/site/content/docs/5.2/examples/sidebars/index.html @@ -110,11 +110,11 @@ body_class: "" </ul> <hr> <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"> <strong>mdo</strong> </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="#">Settings</a></li> <li><a class="dropdown-item" href="#">Profile</a></li> @@ -166,11 +166,11 @@ body_class: "" </ul> <hr> <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"> <strong>mdo</strong> </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="#">Settings</a></li> <li><a class="dropdown-item" href="#">Profile</a></li> @@ -215,10 +215,10 @@ body_class: "" </li> </ul> <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"> </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="#">Settings</a></li> <li><a class="dropdown-item" href="#">Profile</a></li> diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html index 8d4e9796f0..3dc8cb4823 100644 --- a/site/layouts/partials/home/masthead-followup.html +++ b/site/layouts/partials/home/masthead-followup.html @@ -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> <div class="p-4 mb-3 border rounded-3"> <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 </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> @@ -255,10 +255,10 @@ $utilities: map-merge( </div> {{ 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 </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> |