Pug编写的Bootstrap导航栏下拉菜单点击无法展开问题

导航栏顶部显示正常，但点击下拉触发项无反应，核心问题是页面内HTML元素ID重复：

• 三个下拉菜单的触发链接全部使用了相同的id值navbarDropdown
• 三个下拉菜单面板的aria-labelledby属性也全部指向这个重复ID
  HTML规范要求同一页面中ID必须全局唯一，Bootstrap下拉组件初始化时无法正确匹配触发项与对应面板，因此点击无法触发展开逻辑。
  另外你代码中使用的mr-auto是Bootstrap 4的间距类，Bootstrap 5中已更名为me-auto，该问题不会导致下拉失效，但可能造成导航栏布局偏移。

修改Pug模板中三个下拉模块的ID，保证每个触发链接ID唯一，同时对应下拉面板的aria-labelledby属性与同组触发链接ID匹配即可。
修复后的下拉模块Pug代码如下：

div(class="collapse navbar-collapse" id="navbarSupportedContent")
  ul(class='navbar-nav me-auto w-100 justify-content-around')
    li(class='nav-item dropdown')
      a(class="nav-link dropdown-toggle" href="#" id="itemsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false") Items
      ul(class="dropdown-menu" aria-labelledby="itemsDropdown")
        li
          a(class="dropdown-item" href="/catalog/items") All items
        li
          a(class="dropdown-item" href="/catalog/Item/create") Create new item
    li(class='nav-item dropdown')
      a(class="nav-link dropdown-toggle" href="#" id="brandsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false") Brands
      ul(class="dropdown-menu" aria-labelledby="brandsDropdown")
        li
          a(class="dropdown-item" href="/catalog/brands") All brands
        li
          a(class="dropdown-item" href="/catalog/brand/create") Create new brand
    li(class='nav-item dropdown')
      a(class="nav-link dropdown-toggle" href="#" id="categoriesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false") Categories
      ul(class="dropdown-menu" aria-labelledby="categoriesDropdown")
        li
          a(class="dropdown-item" href="/catalog/categories") All categories
        li
          a(class="dropdown-item" href="/catalog/category/create") Create new category

修改保存后重启服务刷新页面，下拉菜单即可正常展开。

内容的提问来源于stack exchange，提问作者Adildo