Bootstrap 5 Offcanvas导航：合并两个独立导航的问题

核心实现思路 #

将顶部导航和主导航的所有菜单项统一放入同一个Offcanvas容器，通过单个触发按钮控制Offcanvas的显示/隐藏，同时借助Bootstrap响应式工具类，让桌面端正常展示两个独立导航，仅在移动端启用Offcanvas合并菜单模式。

完整代码示例 #

<!-- 顶部导航栏（含移动端触发按钮） -->
<nav class="navbar navbar-expand-md bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌Logo</a>
    
    <!-- 移动端Offcanvas触发按钮 -->
    <button class="navbar-toggler d-md-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#mergedNavCanvas" aria-controls="mergedNavCanvas">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 桌面端顶部导航 -->
    <div class="collapse navbar-collapse d-none d-md-flex">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">顶部导航项1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">顶部导航项2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 桌面端主导航栏 -->
<nav class="navbar navbar-expand-md bg-dark navbar-dark d-none d-md-flex">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">主导航项1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">主导航项2</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">下拉菜单</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">子项1</a></li>
          <li><a class="dropdown-item" href="#">子项2</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

<!-- 合并后的Offcanvas容器（仅移动端生效） -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="mergedNavCanvas" aria-labelledby="mergedNavLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="mergedNavLabel">全部导航</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <!-- 顶部导航组 -->
    <ul class="navbar-nav mb-3">
      <li class="nav-item">
        <a class="nav-link" href="#">顶部导航项1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">顶部导航项2</a>
      </li>
    </ul>
    <!-- 主导航组 -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">主导航项1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">主导航项2</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">下拉菜单</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">子项1</a></li>
          <li><a class="dropdown-item" href="#">子项2</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

关键优化要点 #

• 响应式控制：用d-md-none让触发按钮仅在移动端显示，d-none d-md-flex确保桌面端的两个导航正常展示，Offcanvas容器默认仅在移动端触发。
• 避免代码冗余：如果不想重复编写导航项，可通过JS克隆桌面端的导航节点到Offcanvas中：

// 克隆顶部导航项到Offcanvas
const topNavClone = document.querySelector('.navbar-collapse .navbar-nav').cloneNode(true);
document.querySelector('.offcanvas-body .navbar-nav:first-child').replaceWith(topNavClone);

// 克隆主导航项到Offcanvas
const mainNavClone = document.querySelector('.bg-dark .navbar-nav').cloneNode(true);
document.querySelector('.offcanvas-body .navbar-nav:last-child').replaceWith(mainNavClone);

• 自定义样式：可修改Offcanvas的位置（offcanvas-start/offcanvas-end）、背景色、内边距等，匹配项目整体风格。

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