btn btn-secondary dropdown-toggle

bootstrap5.css

bootstrap5.css
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}
bootstrap5.css
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

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-boundary




スクロールウィンドウ幅で制約されるドロップダウンメニュー スクロールウィンドウ幅で制約されるドロップダウンメニュー スクロールウィンドウ幅で制約されるドロップダウンメニュー 
  <div class="bg-info text-center" style="width:250px;height:250px;overflow:scroll;">
    <br><br><br>
    <div class="dropdown">
      <!-- ata-boundary="scrollParent"-->
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
        data-boundary="scrollParent">ドロップダウンボタン</button>
      <div class="dropdown-menu">
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
      </div>
    </div>
  </div>

スペースがない場合に、反対側にドロップダウンを表示させる：data-flip






メニュー1 メニュー2 メニュー3 
  <div class="box" style="overflow: auto">
    <br><br><br><br><br>
    <div class="dropdown">
      <!-- data-flip="true"-->
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-flip="true">ドロップダウンボタン</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-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>

ドロップダウンのオフセット値を設定する：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>