<nav class="navbar bg-body-secondary" data-bs-theme="dark" aria-label="Darkオフキャンバスナビバー">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ダークオフキャンバスナビバー</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasNavbarDarkLabel">オフキャンバス</h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">ホーム</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">リンク</a>
            </li>
            <li class="nav-item dropdown">
              <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="#">メニュー1</a></li>
                <li><a class="dropdown-item" href="#">メニュー2</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">メニュー3</a></li>
              </ul>
            </li>
          </ul>
          <form class="d-flex mt-3" role="search">
            <input class="form-control me-2" type="search" placeholder="検索..." aria-label="検索...">
            <button class="btn btn-outline-success flex-shrink-0" type="submit">検索</button>
          </form>
        </div>
      </div>
    </div>
  </nav>

  <nav class="navbar bg-body-tertiary" aria-label="Lightオフキャンバスナビバー">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">オフキャンバスナビバー</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarLight" aria-labelledby="offcanvasNavbarLightLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasNavbarLightLabel">オフキャンバス</h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">ホーム</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">リンク</a>
            </li>
            <li class="nav-item dropdown">
              <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="#">メニュー1</a></li>
                <li><a class="dropdown-item" href="#">メニュー2</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">メニュー3</a></li>
              </ul>
            </li>
          </ul>
          <form class="d-flex mt-3" role="search">
            <input class="form-control me-2" type="search" placeholder="検索..." aria-label="検索...">
            <button class="btn btn-outline-success flex-shrink-0" type="submit">検索</button>
          </form>
        </div>
      </div>
    </div>
  </nav>

  <nav class="navbar navbar-expand-lg bg-body-secondary" data-bs-theme="dark" aria-label="レスポンシブのオフキャンバスナビバー">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">レスポンシブのオフキャンバスナビバー</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="offcanvas-lg offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasNavbar2Label">オフキャンバス</h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">ホーム</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">リンク</a>
            </li>
            <li class="nav-item dropdown">
              <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="#">メニュー1</a></li>
                <li><a class="dropdown-item" href="#">メニュー2</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">メニュー3</a></li>
              </ul>
            </li>
          </ul>
          <form class="d-flex mt-3 mt-lg-0" role="search">
            <input class="form-control me-2" type="search" placeholder="検索..." aria-label="検索...">
            <button class="btn btn-outline-success flex-shrink-0" type="submit">検索</button>
          </form>
        </div>
      </div>
    </div>
  </nav>