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