ドロップダウン
ドロップダウンコンポーネントで、リンクのリストなどを表示するためのコンテキストオーバーレイをトグルします。
Overview
ドロップダウンは、トグル可能で、リンクのリストなどを表示するためのコンテキストオーバーレイです。
これらは、ホバリングではなく、クリックで切り替えられます。
Examples
ドロップダウンのトグル（ボタンやリンク）とドロップダウンメニューを Dropdown コンポーネントで囲みます。
また、ドロップダウンアイテムは DropdownMenu コンポーネントで囲みます。
Single button
マークアップを変更するだけで、任意の単一のボタンをドロップダウントグルに変えることができます。
色の変更も可能です。
Split button
同様に、単一ボタンのドロップダウンと実質的に同じマークアップで分割ボタンのドロップダウンを作成しますが、DropdownToggleSplit コンポーネント使用して、ドロップダウンのキャレットの周りの適切な間隔を確保します。
Sizing
ボタンのドロップダウンは、デフォルトのドロップダウンボタンや分割されたドロップダウンボタンなど、あらゆるサイズのボタンで動作します。
Dark dropdowns
DropdownMenu コンポーネントにdark属性を追加することで、ダークドロップダウンにします。
DropdownItemsを変更する必要はありません。
そして、それをナビバーでも使用できます。
Directions
Dropup
親要素に placement="dropup" 属性を追加することで、上向きに表示できます。
Dropright
placement="dropend" を追加することで、右向きに表示できます。
Dropleft
親要素に placement="dropstart" を追加することで、左向きにできます。
Menu items
text 属性で非インタラクティブなドロップダウン項目を作成することもできます。カスタムCSSやテキストユーティリティを使用して、さらに自由にスタイルを設定してください。
Active
ドロップダウンの項目に active 属性を追加して、**アクティブのスタイルにします**。
Disabled
ドロップダウンの項目に disabled 属性を追加して、無効化のスタイルにできます。
Menu alignment
デフォルトでは、ドロップダウンメニューは自動的に上から100%の位置と親の左側に沿って配置されます。
ドロップダウンメニューを右寄せにするには、alignment="end" 属性を DropdownMenu コンポーネントに追加します。
Responsive alignment
レスポンシブアライメントを使用したい場合は、display="static" 属性を追加して動的な位置合わせを無効にし、レスポンシブバリエーションクラスを使用します。
ドロップダウンメニューを右に配置するには、 alignment="{-sm|-md|-lg|-xl|-xxl}-end" を追加します。
左のドロップダウンメニューを指定されたブレークポイント以上の大きさに揃えるには、alignment="end" と alignment="{-sm|-md|-lg|-xl|-xxl}-start" を追加します。
Alignment options
上記のオプションのほとんどを利用して、様々なドロップダウンの配置オプションを一箇所に集めたデモを紹介します。
Menu content
Headers
任意のドロップダウンメニューのアクションのセクションのラベルにヘッダーを追加します。
Dividers
関連するメニュー項目のグループを仕切りで区切流ことができます。
Text
フリーフォームのテキストをドロップダウンメニュー内にテキストで配置し spacing utilities を使用します。
メニューの幅を制限するために、追加のサイジングスタイルが必要になる可能性がもあります。
Forms
ドロップダウンメニューの中にフォームを入れたり、ドロップダウンメニューにして、 margin or padding を使って、必要なネガティブスペースを与えます。
Dropdown options
ドロップダウンの位置を変更するには、 offset 属性または reference 属性を使用します。
Auto close behavior
デフォルトでは、ドロップダウンメニューの内側または外側をクリックすると、ドロップダウンメニューが閉じます。
auto-close="true" 属性を使って、このドロップダウンの動作を変更することができます。