Bootstrap 5 下拉リスト

基本的な下拉リスト

下拉メニューは、ユーザーが事前定義されたリストから値を選択できる切り替え可能なメニューです：

例

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    下拉ボタン
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">リンク 1</a></li>
    <li><a class="dropdown-item" href="#">リンク 2</a></li>
    <li><a class="dropdown-item" href="#">リンク 3</a></li>
  </ul>
</div>

自分で試してみる

例

.dropdown クラスを使用して、下拉メニューを指し示してください。

下拉メニューを開くには、設定された .dropdown-toggle } を追加してください。 クラスと

data-toggle="dropdown" .dropdown-menu クラスを以下の属性のボタンやリンクに追加してください： <div> 要素を使用して実際に下拉メニューを構築します。次に、以下のクラスを追加してください： .dropdown-item クラスを下拉メニューの各要素（リンクやボタン）に追加してください。

下拉リストの区切り線

.dropdown-divider クラスを使用して下拉メニューのリンクを水平に細い線で区切ります：

例

<li><hr class="dropdown-divider"></hr></li>

自分で試してみる

下拉リストのタイトル

.dropdown-header クラスを使用して下拉メニューにタイトルを追加します：

例

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>

自分で試してみる

無効とアクティブな項目

無効とアクティブな項目を表示するには、以下を使用してください： .active クラスを追加して特定の下拉項目をハイライト表示します（青い背景色が追加されます）。

下拉リストの特定の項目を無効にするには、以下を使用してください： .disabled クラス（ホバー時には薄いグレーのテキスト色と「no-parking-sign」アイコンが表示されます）。

例

<li><a class="dropdown-item" href="#">通常</a></li>
<li><a class="dropdown-item active" href="#">アクティブ</a></li>
<li><a class="dropdown-item disabled" href="#">無効</a></li>

自分で試してみる

下拉リスト位置

以下を使用して、下拉リストの位置を変更できます： .dropend または .dropstart クラスを下拉要素に追加して「dropend」または「dropstart」メニューを作成します。注意：インサートシグン/矢印は自動的に追加されます：

Dropright

<div class="dropdown dropend">

自分で試してみる

Dropleft

<div class="dropdown dropstart">

自分で試してみる

下拉リスト右寄せ

右寄せの下拉メニューが必要な場合は、以下を変更してください： .dropdown-menu-end クラスを以下の要素に追加してください： .dropdown-menu の要素：

例

<div class="dropdown-menu dropdown-menu-end">

自分で試してみる

上拉リスト

下拉メニューが下から上に展開するのではなく、上から下に展開するようにしたい場合は、class="dropdown"の<div>要素を変更してください。 "dropup"：

例

<div class="dropup">

自分で試してみる

ドロップダウンテキスト

.dropdown-item-text ドロップダウンアイテムにテキストを追加するために使用されるクラス、またはリンクにデフォルトのリンクスタイルを追加するために使用されます。

例

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">リンク 1</a></li>
  <li><a class="dropdown-item" href="#">リンク 2</a></li>
  <li><a class="dropdown-item" href="#">リンク 3</a></li>
  <li><a class="dropdown-item-text" href="#">テキストリンク</a></li>
  <li><span class="dropdown-item-text">テキストのみ</span></li>
</ul>

自分で試してみる

ボタンとドロップダウンリストの組み合わせ

例

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">スマートフォン</a></li>
      <li><a class="dropdown-item" href="#">タブレット</a></li>
    </ul>
  </div>
</div>

自分で試してみる

垂直に並べたボタンとドロップダウンリストの組み合わせ

例

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">スマートフォン</a></li>
      <li><a class="dropdown-item" href="#">タブレット</a></li>
    </ul>
  </div>
</div>

自分で試してみる