From: Mark Otto <markdotto@gmail.com>
Date: Wed, 24 Jun 2026 22:30:08 +0000 (-0700)
Subject: Docs: use <button> for navbar menu toggles instead of <a href="#">
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a0a6d625b32bc7fc6f4082c41af73d81f1f14ba8;p=thirdparty%2Fbootstrap.git

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 075fbd15ac..5ad7a77f2c 100644
--- 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>