From: Julien Déramond <juderamond@gmail.com>
Date: Sun, 7 Jun 2026 19:40:54 +0000 (+0200)
Subject: Docs: add missing `role='button'` to `<a>` dropdowns (#42482)
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=fda060090f1c8c72c554a7dc550784055695f585;p=thirdparty%2Fbootstrap.git

Docs: add missing `role='button'` to `<a>` dropdowns (#42482)
---

diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 4fcf8ee0f0..3f2e7dde8d 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -957,7 +957,7 @@ describe('Tab', () => {
         '  <li class="nav-item"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
         '  <li class="nav-item"><a class="nav-link" href="#profile" data-bs-toggle="tab">Profile</a></li>',
         '  <li class="nav-item dropdown">',
-        '    <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#">Dropdown</a>',
+        '    <a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>',
         '    <div class="dropdown-menu">',
         '      <a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>',
         '      <a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-bs-toggle="tab">@mdo</a>',
@@ -979,7 +979,7 @@ describe('Tab', () => {
         '<ul class="nav nav-tabs" id="nav1">',
         '  <li class="nav-item active"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
         '  <li class="nav-item dropdown">',
-        '    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>',
+        '    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>',
         '    <div class="dropdown-menu">',
         '      <a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>',
         '    </div>',
@@ -990,7 +990,7 @@ describe('Tab', () => {
         '<ul class="nav nav-tabs" id="nav2">',
         '  <li class="nav-item active"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
         '  <li class="nav-item dropdown">',
-        '    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>',
+        '    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>',
         '    <div class="dropdown-menu">',
         '      <a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>',
         '    </div>',
@@ -1015,7 +1015,7 @@ describe('Tab', () => {
         '  <li class="nav-item"><a class="nav-link active" href="#home" data-bs-toggle="tab">Home</a></li>',
         '  <li class="nav-item"><a class="nav-link" href="#profile" data-bs-toggle="tab">Profile</a></li>',
         '  <li class="nav-item dropdown">',
-        '    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>',
+        '    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>',
         '    <ul class="dropdown-menu">',
         '      <li><a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a></li>',
         '      <li><a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-bs-toggle="tab">@mdo</a></li>',
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 04cf06d7b6..4e422db597 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -28,7 +28,7 @@
               <a class="nav-link" href="#">Link</a>
             </li>
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+              <a class="nav-link dropdown-toggle" href="#" role="button" 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>
@@ -50,7 +50,7 @@
           <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+          <a class="nav-link dropdown-toggle" href="#" role="button" 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>
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index 541028478d..8c3450b7a8 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -24,7 +24,7 @@
             <a class="nav-link" href="#mdo">@mdo</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
             <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#one">One</a></li>
               <li><a class="dropdown-item" href="#two">Two</a></li>
diff --git a/site/src/assets/examples/cheatsheet-rtl/index.astro b/site/src/assets/examples/cheatsheet-rtl/index.astro
index 113ad7e9d5..6dd4001fe4 100644
--- a/site/src/assets/examples/cheatsheet-rtl/index.astro
+++ b/site/src/assets/examples/cheatsheet-rtl/index.astro
@@ -1428,7 +1428,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
               <a class="nav-link" href="#mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>
             </li>
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">قائمة منسدلة</a>
+              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">قائمة منسدلة</a>
               <ul class="dropdown-menu">
                 <li><a class="dropdown-item" href="#one">واحد</a></li>
                 <li><a class="dropdown-item" href="#two">اثنان</a></li>
diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index 341a4d90ab..3081df2b9c 100644
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -1404,7 +1404,7 @@ export const body_class = 'bg-body-tertiary'
               <a class="nav-link" href="#scrollspyHeading2">Second</a>
             </li>
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
               <ul class="dropdown-menu">
                 <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
                 <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
diff --git a/site/src/assets/examples/headers/index.astro b/site/src/assets/examples/headers/index.astro
index a233ae9039..83f64cb0d7 100644
--- a/site/src/assets/examples/headers/index.astro
+++ b/site/src/assets/examples/headers/index.astro
@@ -136,7 +136,7 @@ export const extra_css = ['headers.css']
         </form>
 
         <div class="dropdown text-end">
-          <a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+          <a class="d-block link-body-emphasis text-decoration-none dropdown-toggle" href="#" role="button" 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">
@@ -156,7 +156,7 @@ export const extra_css = ['headers.css']
   <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-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Bootstrap menu">
+        <a class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Bootstrap menu">
           <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
         </a>
         <ul class="dropdown-menu text-small shadow">
@@ -176,7 +176,7 @@ export const extra_css = ['headers.css']
         </form>
 
         <div class="flex-shrink-0 dropdown">
-          <a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+          <a class="d-block link-body-emphasis text-decoration-none dropdown-toggle" href="#" role="button" 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">
diff --git a/site/src/assets/examples/navbar-bottom/index.astro b/site/src/assets/examples/navbar-bottom/index.astro
index 6b3c796d58..251f475595 100644
--- a/site/src/assets/examples/navbar-bottom/index.astro
+++ b/site/src/assets/examples/navbar-bottom/index.astro
@@ -29,7 +29,7 @@ export const title = 'Bottom navbar example'
           <a class="nav-link disabled" aria-disabled="true">Disabled</a>
         </li>
         <li class="nav-item dropup">
-          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropup</a>
+          <a class="nav-link dropdown-toggle" href="#" role="button" 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>
diff --git a/site/src/assets/examples/navbars/index.astro b/site/src/assets/examples/navbars/index.astro
index 9dad682027..d7aee76731 100644
--- a/site/src/assets/examples/navbars/index.astro
+++ b/site/src/assets/examples/navbars/index.astro
@@ -25,7 +25,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" href="#" role="button" 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>
@@ -82,7 +82,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" href="#" role="button" 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>
@@ -116,7 +116,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" href="#" role="button" 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>
@@ -150,7 +150,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" href="#" role="button" 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>
@@ -184,7 +184,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" href="#" role="button" 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>
@@ -218,7 +218,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" href="#" role="button" 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>
@@ -252,7 +252,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" href="#" role="button" 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>
@@ -286,7 +286,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" href="#" role="button" 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>
@@ -323,7 +323,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" href="#" role="button" 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>
@@ -355,7 +355,7 @@ export const extra_css = ['navbars.css']
               <a class="nav-link disabled" aria-disabled="true">Disabled</a>
             </li>
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+              <a class="nav-link dropdown-toggle" href="#" role="button" 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>
@@ -388,7 +388,7 @@ export const extra_css = ['navbars.css']
               <a class="nav-link disabled" aria-disabled="true">Disabled</a>
             </li>
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+              <a class="nav-link dropdown-toggle" href="#" role="button" 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>
@@ -419,7 +419,7 @@ export const extra_css = ['navbars.css']
               <a class="nav-link disabled" aria-disabled="true">Disabled</a>
             </li>
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+              <a class="nav-link dropdown-toggle" href="#" role="button" 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>
diff --git a/site/src/assets/examples/offcanvas-navbar/index.astro b/site/src/assets/examples/offcanvas-navbar/index.astro
index c13af384b0..6e6e82bf77 100644
--- a/site/src/assets/examples/offcanvas-navbar/index.astro
+++ b/site/src/assets/examples/offcanvas-navbar/index.astro
@@ -31,7 +31,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
           <a class="nav-link" href="#">Switch account</a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Settings</a>
+          <a class="nav-link dropdown-toggle" href="#" role="button" 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>
diff --git a/site/src/assets/examples/sidebars/index.astro b/site/src/assets/examples/sidebars/index.astro
index 058cb372b4..119fea2efe 100644
--- a/site/src/assets/examples/sidebars/index.astro
+++ b/site/src/assets/examples/sidebars/index.astro
@@ -71,7 +71,7 @@ export const extra_js = [{src: 'sidebars.js'}]
     </ul>
     <hr>
     <div class="dropdown">
-      <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      <a class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" href="#" role="button" 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>
@@ -127,7 +127,7 @@ export const extra_js = [{src: 'sidebars.js'}]
     </ul>
     <hr>
     <div class="dropdown">
-      <a href="#" class="d-flex align-items-center link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      <a class="d-flex align-items-center link-body-emphasis text-decoration-none dropdown-toggle" href="#" role="button" 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>
@@ -176,7 +176,7 @@ export const extra_js = [{src: 'sidebars.js'}]
       </li>
     </ul>
     <div class="dropdown border-top">
-      <a href="#" class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      <a class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle" href="#" role="button" 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">
diff --git a/site/src/content/docs/components/navs-tabs.mdx b/site/src/content/docs/components/navs-tabs.mdx
index fe51c69281..f696117d11 100644
--- a/site/src/content/docs/components/navs-tabs.mdx
+++ b/site/src/content/docs/components/navs-tabs.mdx
@@ -250,7 +250,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
       <a class="nav-link active" aria-current="page" href="#">Active</a>
     </li>
     <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+      <a class="nav-link dropdown-toggle" href="#" role="button" 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>
@@ -274,7 +274,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
       <a class="nav-link active" aria-current="page" href="#">Active</a>
     </li>
     <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+      <a class="nav-link dropdown-toggle" href="#" role="button" 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>
diff --git a/site/src/content/docs/components/scrollspy.mdx b/site/src/content/docs/components/scrollspy.mdx
index e9c9825160..386081863d 100644
--- a/site/src/content/docs/components/scrollspy.mdx
+++ b/site/src/content/docs/components/scrollspy.mdx
@@ -32,7 +32,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
         <a class="nav-link" href="#scrollspyHeading2">Second</a>
       </li>
       <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
         <ul class="dropdown-menu">
           <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
           <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
@@ -66,7 +66,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
       <a class="nav-link" href="#scrollspyHeading2">Second</a>
     </li>
     <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+      <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
       <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
         <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>