nav-item dropdown

html bootstrap5 Sample

js ナビゲーションドロップダウンメニュー:dropdown-toggle


    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">ブランド</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
          aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <!-- dropdown-toggleを使う -->
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenu" data-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                ドロップダウンメニュー
              </a>
              <div class="dropdown-menu" aria-labelledby="ドロップダウンメニュー">
                <!-- dropdown-menuは  display: none -->
                <a class="dropdown-item" href="#">サブメニュー1</a>
                <a class="dropdown-item" href="#">サブメニュー2</a>
                <a class="dropdown-item" href="#">サブメニュー3</a>
              </div>
            </li>
            <li class="nav-item active"><a class="nav-link" href="#">メニュー1</a></li>
            <li class="nav-item active"><a class="nav-link" href="#">メニュー2</a></li>
            <li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
          </ul>
        </div>
      </div>
    </nav>

js ピル型ナビゲーションドロップダウン:nav-linkとdropdown-toggle


  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

js タブ型ナビゲーションドロップダウン:dropdown-toggle


  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>