aria-haspopup

html bootstrap5 Sample

button要素を使用したドロップダウン：dropdownとdata-toggle

メニュー01 メニュー02 メニュー03 
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

ボタングループに設定するドロップダウン：btn-group

メニュー01 メニュー02 メニュー03 
  <!-- ボタングループにすると、ドロップダウンメニューのデザインが変わる -->
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      ドロップダウン
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

メニュー項目にbuttonを使用する：dropdown-menu

  <div class="dropdown">
    <!-- 切り替えボタン -->
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <button class="dropdown-item" type="button">メニュー01</button>
      <button class="dropdown-item" type="button">メニュー02</button>
      <button class="dropdown-item" type="button">メニュー03</button>
    </div>
  </div>

メニューの位置をボタンと右寄せにする：dropdown-menu-right

  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      メニューの位置を右寄せにしたドロップダウン
    </button>
    <div class="dropdown-menu dropdown-menu-right">
      <button class="dropdown-item" type="button">メニュー01</button>
      <button class="dropdown-item" type="button">メニュー02</button>
      <button class="dropdown-item" type="button">メニュー03</button>
    </div>
  </div>

切り替えボタンにaタグ要素を使用したドロップダウン：dropdown-toggle

メニュー01 メニュー02 メニュー03 
  <div class="dropdown">
    <!-- 切り替えボタン -->
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

メニュー項目にアクティブの状態を設定する：active

メニュー01 メニュー02（無効） メニュー03（アクティブ） 
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item disabled" href="#">メニュー02（無効）</a>
      <a class="dropdown-item active" href="#">メニュー03（アクティブ）</a>
    </div>
  </div>

左側表示のドロップメニュー：dropleft

メニュー01 メニュー02 メニュー03 
  <div class="container py-5 d-flex justify-content-center">
    <!-- 左方向へのドロップ -->
    <div class="btn-group dropleft">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">左方向へのドロップ</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

右側表示のドロップメニュー：dropright

メニュー01 メニュー02 メニュー03 
  <div class="container py-5 d-flex justify-content-center">
    <!-- 右方向へのドロップ -->
    <div class="btn-group dropright">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">右方向へのドロップ</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

上側表示のドロップメニュー：dropup

メニュー01 メニュー02 メニュー03 
  <div class="container py-5 d-flex justify-content-center">
    <!-- 上方向へのドロップ -->
    <div class="btn-group dropup">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">上方向へのドロップ</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

ドロップダウンのオフセット値を設定する：data-offset

メニュー1 メニュー2 メニュー3 
  <div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
      data-offset="10,20" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>

ドロップダウンメニューにdivでテキストを配置する：text-muted

メニュー内のテキストその1

メニュー内のテキストその2

  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu p-3 text-muted" style="max-width: 300px;">
      <p>メニュー内のテキストその1</p>
      <p class="text-danger">メニュー内のテキストその2</p>
    </div>
  </div>

トグルボタンでdivコンテンツに様々な要素を追加する：dropdown-toggleとdropdown-menu

ドロップダウンメニューのタイトル
初めての方 パスワードをお忘れの方 
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- divで作成するコンテンツありのメニュー -->
    <div class="dropdown-menu">
      <h6 class="dropdown-header">ドロップダウンメニューのタイトル</h6>
      <form class="px-4 py-3">
        <div class="form-group">
          <label for="email">メールアドレス</label>
          <input type="email" class="form-control" id="email" placeholder="email@example.com">
        </div>
        <div class="form-group">
          <label for="password">パスワード</label>
          <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="check">
          <label class="form-check-label" for="check"> ログイン情報を記憶 </label>
        </div>
        <button type="submit" class="btn btn-secondary">ログイン</button>
      </form>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#1">初めての方</a>
      <a class="dropdown-item" href="#2">パスワードをお忘れの方</a>
    </div>
  </div>

ドロップダウンにリンクなしの項目を追加する：dropdown-item-text

非リンクテキスト メニュー1 メニュー2 メニュー3 
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <div class="dropdown-menu">
      <!-- メニューの説明分など入れたい場合に利用 -->
      <span class="dropdown-item-text">非リンクテキスト</span>
      <a class="dropdown-item" href="#1">メニュー1</a>
      <a class="dropdown-item" href="#2">メニュー2</a>
      <a class="dropdown-item" href="#3">メニュー3</a>
    </div>
  </div>

ドロップダウンで用意されているJSメソッド：dropdpown('toggle')

メニュー01 メニュー02 メニュー03 
  <!-- ドロップダウン -->
  <div class="dropdown">
    <!-- 切り替えボタン -->
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownExample" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- 最初から選択肢を出しておく -->
    <div class="dropdown-menu" aria-labelledby="dropdownExample">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>
  <script>
    $(function () {
      $('#dropdownExample').dropdown('toggle');
    });
  </script>

ドロップダウンのオフセット値を設定する：offset

メニュー1 メニュー2 メニュー3 
  <!-- data-offset="x,y" はメニューの表示位置を右方向に x、下方向に y ずれた位置に表示します。 -->
  <div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>
  <script>
    $(function () {
      $('#dropdownMenuButton').dropdown({
        offset: '10, 20'
      })
    });
  </script>

スプリットボタン（分割ボタン）のドロップダウン：dropdown-toggle-split

メニュー01 メニュー02 メニュー03 
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">スプリットボタン</button>
    <!-- ボタンとメニューを分割して表示する -->
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

入力グループ ドロップダウン付きアドオン：input-group-append

リンク1 リンク2 リンク3 
  <div class="input-group">
    <input type="text" class="form-control" aria-label="ドロップダウン付テキスト入力欄">
    <div class="input-group-append">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">アクション</button>
      <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>
    </div>
  </div>

入力グループ スプリットボタン付きアドオン：input-group-append

リンク1 リンク2 リンク3 
  <div class="input-group">
    <input type="text" class="form-control" aria-label="スプリットボタン付テキスト入力欄">
    <div class="input-group-append">
      <button type="button" class="btn btn-secondary">アクション</button>
      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">ドロップダウン切替</span>
      </button>
      <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>
    </div>
  </div>

ドロップダウンメニュー：data-toggleとdropdown

リンク1 リンク2 
  <!-- .dropdown, .dropdown-toggle, data-toggle="dropdown", .dropdown-menu, .dropdown-item を組み合わせてドロップダウンメニューを作成する -->
  <div class="btn-group" role="group" aria-label="ドロップダウンを含むボタングループ">
    <button type="button" class="btn btn-secondary">1</button>
    <div class="btn-group" role="group">
      <button id="dropmenu1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        ドロップダウン
      </button>
      <div class="dropdown-menu" aria-labelledby="dropmenu1">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
      </div>
    </div>
  </div>

垂直方向ボタングループ：btn-group-vertical

リンク1 リンク2 
  <div class="btn-group-vertical" role="group" aria-label="ドロップダウンを含むボタングループ">
    <button type="button" class="btn btn-secondary">上ボタン</button>
    <button type="button" class="btn btn-secondary">中ボタン</button>
    <div class="btn-group" role="group">
      <button id="drop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        ドロップダウン
      </button>
      <div class="dropdown-menu" aria-labelledby="drop2">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
      </div>
    </div>
    <button type="button" class="btn btn-secondary">下ボタン</button>
  </div>

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

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            ドロップダウンメニュー
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenu">
            <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>
  </nav>

ピル型ナビゲーションドロップダウン：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-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>

タブ型ナビゲーションドロップダウン：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-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>