Docs: use <button> for navbar menu toggles instead of <a href="#">

A menu toggle is a button, not a link. Replace the navbar dropdown
toggles' `<a href="#" role="button">` with semantic `<button>`
(.nav-link already resets button styling). Fixes #40995.

diff --git a/site/src/content/docs/components/navbar.mdx b/site/src/content/docs/components/navbar.mdx
index 075fbd15ac4a86d60a5f4d7243ff75142e3e8ac0..5ad7a77f2c457adff402c8f32842905fa5683f45 100644 (file)
--- a/site/src/content/docs/components/navbar.mdx
+++ b/site/src/content/docs/components/navbar.mdx
@@ -37,9 +37,9 @@ Here’s a navbar that includes most supported sub-components and a responsive r
               <a class="nav-link" href="#">Link</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
+              <button class="nav-link" type="button" data-bs-toggle="menu" aria-expanded="false">
                 Menu
-              </a>
+              </button>
               <div class="menu">
                 <a class="menu-item" href="#">Action</a>
                 <a class="menu-item" href="#">Another action</a>
@@ -221,9 +221,9 @@ You can also use menus in your navbar. Menus require a wrapping element for posi
               <a class="nav-link" href="#">Pricing</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
+              <button class="nav-link" type="button" data-bs-toggle="menu" aria-expanded="false">
                 Menu link
-              </a>
+              </button>
               <div class="menu">
                 <a class="menu-item" href="#">Action</a>
                 <a class="menu-item" href="#">Another action</a>
@@ -350,9 +350,9 @@ To make a navbar dark, add `data-bs-theme="dark"` to the `.navbar` element.
               <a class="nav-link" href="#">Link</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
+              <button class="nav-link" type="button" data-bs-toggle="menu" aria-expanded="false">
                 Menu
-              </a>
+              </button>
               <div class="menu">
                 <a class="menu-item" href="#">Action</a>
                 <a class="menu-item" href="#">Another action</a>