ドロップダウン | コンポーネント

ドロップダウンは、リンクやアクションのリストをドロップダウンメニュー形式で表示するための、切り替え可能なコンテキストオーバーレイです。

<b-dropdown>（または短いエイリアスの<b-dd>としても知られています）コンポーネントは、リンクなどのリストを表示するための切り替え可能なコンテキストオーバーレイです。ホバーではなく、クリック（またはフォーカス時にスペースキーまたはEnterキーを押す）によって切り替えられます。これは意図的な設計上の決定です。

<div>
  <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Active action</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown.vue -->

ボタンコンテンツ

ドロップダウンボタンのテキストは、textプロパティ（前の例で示されています）を使用するか、textプロパティの代わりにbutton-contentスロットを使用することでカスタマイズできます。button-contentスロットを使用すると、ボタンコンテンツに基本的なHTMLとアイコンを使用できます。

textプロパティとbutton-contentスロットの両方が存在する場合、button-contentスロットが優先されます。

<div>
  <b-dropdown text="Button text via Prop">
    <b-dropdown-item href="#">An item</b-dropdown-item>
    <b-dropdown-item href="#">Another item</b-dropdown-item>
  </b-dropdown>

  <b-dropdown>
    <template #button-content>
      Custom <strong>Content</strong> with <em>HTML</em> via Slot
    </template>
    <b-dropdown-item href="#">An item</b-dropdown-item>
    <b-dropdown-item href="#">Another item</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-button-content.vue -->

位置調整

ドロップダウンは、左揃えと右揃え、ドロップダウンとドロップアップなど、さまざまな位置調整をサポートしており、メニューが表示領域からはみ出す場合に自動的に反転（ドロップダウンからドロップアップへ、またはその逆）します。

ドロップダウンメニューは、上にあるボタンに対して左揃え（デフォルト）または右揃えにすることができます。ドロップダウンを右揃えにするには、rightプロパティを設定します。

<div>
  <b-dropdown id="dropdown-left" text="Left align" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown id="dropdown-right" right text="Right align" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-right.vue -->

ドロップアップ

dropupプロパティを設定することで、ドロップダウンメニューをドロップアップメニューに変更できます。

<div>
  <b-dropdown id="dropdown-dropup" dropup text="Drop-Up" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-dropup.vue -->

右または左にドロップ

droprightプロパティを設定することで、ドロップダウンメニューを右ドロップメニューに変更できます。または、dropleftプロパティをtrueに設定することで、左ドロップメニューに変更できます。

droprightはdropleftよりも優先されます。dropupが設定されている場合、droprightとdropleftはどちらも効果がありません。

<div>
  <b-dropdown id="dropdown-dropright" dropright text="Drop-Right" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown id="dropdown-dropleft" dropleft text="Drop-Left" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-dropright-dropleft.vue -->

自動「反転」

デフォルトでは、ドロップダウンはビューポート内の現在の位置に基づいて上または下に反転することがあります。この自動反転機能を無効にするには、no-flipプロパティを設定します。

メニューをトグルボタンから少し離したい場合は、offsetプロパティを使用して、トグルボタンから右に（負の値の場合は左に）押し出すピクセル数を指定します。

ピクセル数で指定します。正の値は右シフト、負の値は左シフトです。
CSS単位（例：0.3rem、4px、1.2emなど）を文字列として渡して指定します。

<div>
  <b-dropdown id="dropdown-offset" offset="25" text="Offset Dropdown" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-offset.vue -->

境界制約

デフォルトでは、ドロップダウンはスクロール親に視覚的に制約されています。これはほとんどの場合で十分です。ただし、overflow: scroll（または同様のもの）が設定されている要素の中にドロップダウンを配置する場合、ドロップダウンメニューは状況によっては切り取られる可能性があります。これを回避するには、boundaryプロパティを使用して境界要素を指定できます。サポートされている値は、'scrollParent'（デフォルト）、'viewport'、'window'、またはHTML要素への参照です。境界値は、Popper.jsのboundariesElement設定オプションに直接渡されます。

注記： boundaryが'scrollParent'（デフォルト）以外の値の場合、スタイルposition: staticがドロップダウンコンポーネントのルート要素に適用され、メニューがスクロールコンテナから「飛び出す」ことができます。状況によっては、これによりドロップダウントグルボタンのレイアウトや配置に影響を与える可能性があります。このような場合は、ドロップダウンを別の要素でラップする必要がある場合があります。

高度なPopper.js設定

ドロップダウンを必要に応じて動作させるために高度なPopper.js設定が必要な場合は、popper-optsプロパティを使用してカスタム設定オブジェクトを渡すことができます。このオブジェクトは、BootstrapVueのデフォルト設定とマージされます。

すべての設定オプションについては、Popper.jsのドキュメントを参照してください。

注記：offset、boundary、no-flipプロパティは、Popper.jsの設定を上書きすると効果がなくなる場合があります。

分割ボタンのサポート

左側のボタンが標準的なclickイベントとリンクサポートを提供し、右側のボタンがドロップダウンメニューのトグルボタンである、分割ドロップダウンボタンを作成します。

<div>
  <b-dropdown split text="Split Dropdown" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-split.vue -->

分割ボタンのリンクサポート

左側の分割ボタンは、デフォルトで<button>型（正確には<b-button>）の要素になります。このボタンをリンクまたは<router-link>に変換するには、split-hrefプロパティを介してhrefを指定するか、split-toプロパティを介してルーターリンクのto値を指定します。ボタンとしての外観は維持されます。

<div>
  <b-dropdown split split-href="#foo/bar" text="Split Link" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-split-link.vue -->

分割ボタンの種類

分割ボタンは、デフォルトで'button'型のボタンです。split-button-typeプロパティを使用して別の型を指定できます。サポートされている値は、'button'、'submit'、'reset'です。

split-toまたはsplit-hrefプロパティが設定されている場合、split-button-typeプロパティは無視されます。

スタイルオプション

ドロップダウンは、ドロップダウントグルボタンのスタイル設定のためのさまざまなプロパティをサポートしています。

サイズ変更

ドロップダウンは、デフォルトと分割ドロップダウンボタンを含む、すべてのサイズのトリガーボタンで動作します。

sizeプロパティをsm（小さいボタン）またはlg（大きいボタン）のいずれかに設定します。

<div>
  <div>
    <b-dropdown size="lg" text="Large" class="m-2">
      <b-dropdown-item-button>Action</b-dropdown-item-button>
      <b-dropdown-item-button>Another action</b-dropdown-item-button>
      <b-dropdown-item-button>Something else here</b-dropdown-item-button>
    </b-dropdown>

    <b-dropdown size="lg" split text="Large Split" class="m-2">
      <b-dropdown-item-button>Action</b-dropdown-item-button>
      <b-dropdown-item-button>Another action</b-dropdown-item-button>
      <b-dropdown-item-button>Something else here...</b-dropdown-item-button>
    </b-dropdown>
  </div>
  <div>
    <b-dropdown size="sm" text="Small" class="m-2">
      <b-dropdown-item-button>Action</b-dropdown-item-button>
      <b-dropdown-item-button>Another action</b-dropdown-item-button>
      <b-dropdown-item-button>Something else here...</b-dropdown-item-button>
    </b-dropdown>

    <b-dropdown size="sm" split text="Small Split" class="m-2">
      <b-dropdown-item-button>Action</b-dropdown-item-button>
      <b-dropdown-item-button>Another action</b-dropdown-item-button>
      <b-dropdown-item-button>Something else here...</b-dropdown-item-button>
    </b-dropdown>
  </div>
</div>

<!-- b-dropdown-sizes.vue -->

注記：ボタンのサイズを変更しても、メニュー項目のサイズは変わりません！

ドロップダウントグルボタンには、variantプロパティをsuccess、primary、info、danger、link、outline-darkなどに設定することで（またはカスタムバリエーションを定義した場合）、標準的なBootstrapコンテキストバリエーションを適用できます。デフォルトのバリエーションはsecondaryです。

組み込みのコンテキストバリエーションの完全なリストについては、バリエーションリファレンスを参照してください。

<div>
  <b-dropdown text="Primary" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown text="Success" variant="success" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown text="Outline Danger" variant="outline-danger" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-variants.vue -->

toggle-classプロパティを介して、トグルボタンに任意のクラスを適用することもできます。このプロパティは、文字列または文字列の配列を受け入れます。

分割ボタンのカラーバリエーション

デフォルトでは、左側の分割ボタンはtoggleボタンと同じvariantを使用します。split-variantプロパティを使用して、分割ボタンに独自のvariantを与えることができます。

<div>
  <b-dropdown
    split
    split-variant="outline-primary"
    variant="primary"
    text="Split Variant Dropdown"
    class="m-2"
  >
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-split-variant.vue -->

ブロックレベルのドロップダウン

デフォルトでは、ドロップダウンはボタンのように動作し、インラインで表示されます。ブロックレベルのドロップダウン（親の全幅に広がる）を作成するには、blockプロパティを設定します。通常のボタンと分割ボタンの両方のドロップダウンがサポートされています。

<div>
  <b-dropdown text="Block Level Dropdown" block variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown
    text="Block Level Split Dropdown"
    block
    split
    split-variant="outline-primary"
    variant="primary"
    class="m-2"
  >
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-block.vue -->

ドロップダウンメニューも親コンテナの全幅に広げたい場合は、menu-classプロパティにw-100ユーティリティクラスを追加します。

<div>
  <b-dropdown
    text="Block Level Dropdown Menu"
    block
    variant="primary"
    class="m-2"
    menu-class="w-100"
  >
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-block-menu.vue -->

サポートされている多くのドロップダウンサブコンポーネントは、テキストの色を制御するためのvariantプロパティを提供します。

非表示のキャレット

no-caretプロパティをtrueに設定することで、トグルのキャレットを視覚的に非表示にしてドロップダウンを作成できます。これは、ドロップダウンをアイコンとして表示する場合に役立ちます。

<div>
  <b-dropdown size="lg"  variant="link" toggle-class="text-decoration-none" no-caret>
    <template #button-content>
      &#x1f50d;<span class="sr-only">Search</span>
    </template>
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-hidden-caret.vue -->

注記: splitモードを使用している場合は、キャレットは常に表示されます。

デフォルトでは、<b-dropdown>は、メニューが表示されていない場合でもDOMにメニューの内容をレンダリングします。同じページに多数のドロップダウンがレンダリングされている場合、全体的なメモリ使用量が増加するため、パフォーマンスに影響を与える可能性があります。lazyプロパティをtrueに設定することで、<b-dropdown>が表示されている場合にのみメニューの内容をレンダリングするように指示できます。

次のコンポーネントは、ドロップダウン内に配置できます。他のコンポーネントまたはマークアップを使用すると、レイアウトやキーボードナビゲーションが壊れる可能性があります。

サブコンポーネント	説明	エイリアス
`<b-dropdown-item>`	クリック、リンク、および`<router-link>`/`<nuxt-link>`機能を提供するアクションアイテム。デフォルトでは<a>要素としてレンダリングされます。	`<b-dd-item>`
`<b-dropdown-item-button>`	<b-dropdown-item>の代替手段であり、<button>要素を使用してメニューアイテムをレンダリングします。	<b-dropdown-item-btn>、`<b-dd-item-button>`、`<b-dd-item-btn>`
`<b-dropdown-divider>`	ドロップダウンアイテムを区切るための区切り線/スペーサーです。	`<b-dd-divider>`
`<b-dropdown-text>`	メニュー内の自由形式のテキストコンテンツ。	`<b-dd-text>`
`<b-dropdown-form>`	ドロップダウンメニュー内にフォームコントロールを配置するため。	`<b-dd-form>`
`<b-dropdown-group>`	オプションのヘッダー付きでドロップダウンスブコンポーネントをグループ化するため。	`<b-dd-group>`
`<b-dropdown-header>`	ヘッダーアイテム。ドロップダウンアイテムのグループを識別するために使用されます。	`<b-dd-header>`

注記: ネストされたサブメニューはサポートされていません。

<b-dropdown-item>は、通常、メニュー内にナビゲーションリンクを作成するために使用されます。hrefプロパティまたはtoプロパティ（ルーターリンクサポート用）を使用して、適切なナビゲーションリンクを生成します。hrefもtoも提供されない場合、hrefが#の標準的な<a>リンクが生成されます（デフォルトのリンクアクションを防止することにより、トップへのスクロール動作を防止するイベントハンドラー付き）。

disabledプロパティを設定して、ドロップダウンアイテムを無効にします。

従来、ドロップダウンメニューの内容はリンク（<b-dropdown-item>）である必要がありましたが、Bootstrap v4ではそうではなくなりました。 <b-dropdown-item-button>サブコンポーネントを使用することで、ドロップダウンに<button>要素を作成することもできます。<b-dropdown-item-button>はhrefまたはtoプロパティをサポートしません。

disabledプロパティを設定して、ドロップダウンアイテムボタンを無効にします。

<div>
  <b-dropdown id="dropdown-buttons" text="Dropdown using buttons as menu items" class="m-2">
    <b-dropdown-item-button>I'm a button</b-dropdown-item-button>
    <b-dropdown-item-button active>I'm a active button</b-dropdown-item-button>
    <b-dropdown-item-button disabled>I'm a button, but disabled!</b-dropdown-item-button>
    <b-dropdown-item-button>I don't look like a button, but I am!</b-dropdown-item-button>
  </b-dropdown>
</div>

<!-- b-dropdown-item-button.vue -->

メニューアイテムがナビゲーションをトリガーしない場合は、<b-dropdown-item-button>サブコンポーネントを使用することをお勧めします。

<b-dropdown-divider>を使用して、関連するメニューアイテムのグループを区切ります。

<div>
  <b-dropdown id="dropdown-divider" text="Dropdown with divider" class="m-2">
    <b-dropdown-item-button>First item</b-dropdown-item-button>
    <b-dropdown-item-button>Second item</b-dropdown-item-button>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item-button>Separated Item</b-dropdown-item-button>
  </b-dropdown>
</div>

<!-- b-dropdown-divider.vue -->

<b-dropdown-text>サブコンポーネントを使用してドロップダウンメニューに自由形式のテキストを配置するか、テキストとスペースのユーティリティを使用します。メニューの幅を制限/設定するには、追加のサイズ設定スタイルが必要になる可能性があります。

<div>
  <b-dropdown id="dropdown-text" text="Dropdown with text" class="m-2">
    <b-dropdown-text style="width: 240px;">
      Some example text that's free-flowing within the dropdown menu.
    </b-dropdown-text>
    <b-dropdown-text>And this is more example text.</b-dropdown-text>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item-button>First item</b-dropdown-item-button>
    <b-dropdown-item-button>Second Item</b-dropdown-item-button>
  </b-dropdown>
</div>

<!-- b-dropdown-text.vue -->

<b-dropdown-text>には、BootstrapVueのカスタムクラス.b-dropdown-textが適用されており、ほとんどの場合に適した基本的なスタイルを設定しています。デフォルトでは、幅は最も広い<b-dropdown-item>コンテンツと同じになります。追加のスタイルやヘルパークラスをコンポーネントに配置する必要がある場合があります。

デフォルトでは、<b-dropdown-text>は<p>タグを使用してレンダリングされます。tagプロパティを任意の有効なHTML5タグに設定することにより、レンダリングされるタグを変更できます。

ドロップダウンは基本的なフォームをサポートしています。ドロップダウンメニュー内に<b-dropdown-form>を配置し、フォームコントロールを<b-dropdown-form>内に配置します。<b-dropdown-form>は<b-form>コンポーネントに基づいており、通常のフォームと同じプロパティと属性をサポートしています。

<template>
  <div>
    <b-dropdown id="dropdown-form" text="Dropdown with form" ref="dropdown" class="m-2">
      <b-dropdown-form>
        <b-form-group label="Email" label-for="dropdown-form-email" @submit.stop.prevent>
          <b-form-input
            id="dropdown-form-email"
            size="sm"
            placeholder="email@example.com"
          ></b-form-input>
        </b-form-group>

        <b-form-group label="Password" label-for="dropdown-form-password">
          <b-form-input
            id="dropdown-form-password"
            type="password"
            size="sm"
            placeholder="Password"
          ></b-form-input>
        </b-form-group>

        <b-form-checkbox class="mb-3">Remember me</b-form-checkbox>
        <b-button variant="primary" size="sm" @click="onClick">Sign In</b-button>
      </b-dropdown-form>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item-button>New around here? Sign up</b-dropdown-item-button>
      <b-dropdown-item-button>Forgot Password?</b-dropdown-item-button>
    </b-dropdown>
  </div>
</template>

<script>
  export default {
    methods: {
      onClick() {
        // Close the menu and (by passing true) return focus to the toggle button
        this.$refs.dropdown.hide(true)
      }
    }
  }
</script>

<!-- b-dropdown-form.vue -->

<b-dropdown-form>には、BootstrapVueのカスタムクラス.b-dropdown-formが適用されており、ほとんどの場合に適した基本的なスタイルを設定しています。デフォルトでは、幅は最も広い<b-dropdown-item>コンテンツと同じになります。追加のスタイルやヘルパークラスをコンポーネントに配置する必要がある場合があります。

オプションの関連ヘッダー付きで、一連のドロップダウンスブコンポーネントをグループ化します。<b-dropdown-divider>を<b-dropdown-group>と他のグループまたはグループ化されていないドロップダウンコンテンツの間に配置します。

<div>
  <b-dropdown id="dropdown-grouped" text="Dropdown with group" class="m-2">
    <b-dropdown-item-button>
      Non-grouped Item
    </b-dropdown-item-button>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-group id="dropdown-group-1" header="Group 1">
      <b-dropdown-item-button>First Grouped item</b-dropdown-item-button>
      <b-dropdown-item-button>Second Grouped Item</b-dropdown-item-button>
    </b-dropdown-group>
    <b-dropdown-group id="dropdown-group-2" header="Group 2">
      <b-dropdown-item-button>First Grouped item</b-dropdown-item-button>
      <b-dropdown-item-button>Second Grouped Item</b-dropdown-item-button>
    </b-dropdown-group>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item-button>
      Another Non-grouped Item
    </b-dropdown-item-button>
  </b-dropdown>
</div>

<!-- b-dropdown-group.vue -->

<b-dropdown-header>の代わりに<b-dropdown-group>を使用することは、ヘッダー付きのアクセシブルなグループ化されたアイテムを提供するための推奨方法です。

ドロップダウンメニューのアクションセクションにラベルを付けるヘッダーを追加します。

<div>
  <b-dropdown id="dropdown-header" text="Dropdown with header" class="m-2">
    <b-dropdown-header id="dropdown-header-label">
      Dropdown header
    </b-dropdown-header>
    <b-dropdown-item-button aria-describedby="dropdown-header-label">
      First item
    </b-dropdown-item-button>
    <b-dropdown-item-button aria-describedby="dropdown-header-label">
      Second Item
    </b-dropdown-item-button>
  </b-dropdown>
</div>

<!-- b-dropdown-header.vue -->

アクセシビリティの高いヘッダーの詳細については、ドロップダウンヘッダーとアクセシビリティセクションを参照してください。

<b-dropdown-group>サブコンポーネントを使用すると、関連するヘッダーを持つアクセシブルなグループ化されたドロップダウンアイテムを簡単に作成できます。

<b-dropdown-form>内のボタンをクリックしても、メニューは自動的に閉じません。ボタンを使用して（またはフォーム送信イベントを介して）メニューを閉じたい場合は、上記の例に示されているように、<b-dropdown>インスタンスでhide()メソッドを呼び出します。

hide()メソッドは、単一のブール引数を受け取ります。引数がtrueの場合、メニューは閉じられた後にフォーカスがドロップダウントグルボタンに戻されます。それ以外の場合は、メニューが閉じられるとドキュメントにフォーカスが移ります。

ドロップダウンの開閉を監視するには、

export default {
  mounted() {
    this.$root.$on('bv::dropdown::show', bvEvent => {
      console.log('Dropdown is about to be shown', bvEvent)
    })
  }
}

イベントの完全なリストについては、ドキュメントのイベントセクションを参照してください。

オプションでスコープされたデフォルトスロット

デフォルトスロットは、次のスコープを使用してオプションでスコープされます。

プロパティまたはメソッド	説明
`hide()`	ドロップダウンメニューを閉じるために使用できます。オプションのブール引数を受け取ります。これが`true`の場合、フォーカスはトグルボタンに戻ります。

アクセシビリティ

一意のidプロパティを提供することで、レンダリングされたマークアップに適切なaria-*属性が自動的に追加されるため、ARIAへの準拠が保証されます。

デフォルトのARIAロールはmenuに設定されていますが、ユースケースに応じてroleプロパティを使用して、別のロール（navigationなど）に変更できます。roleプロパティの値は、トグルボタンのaria-haspopup属性を決定するために使用されます。

メニューアイテムがナビゲーションをトリガーしない場合、<b-dropdown-item>（ユーザーにリンクとして提示されます）の代わりに、<b-dropdown-item-button>サブコンポーネント（リンクとしてアナウンスされません）を使用することをお勧めします。

ヘッダーとアクセシビリティ

ドロップダウンメニューで<b-dropdown-header>コンポーネントを使用する場合は、各ヘッダーにid属性を追加し、次にaria-describedby属性（関連するヘッダーのid値に設定）をそのヘッダーの下にある各ドロップダウンアイテムに設定することをお勧めします。これにより、支援技術（つまり、視覚障害のあるユーザー）のユーザーに追加のコンテキストを提供します。

<div>
  <b-dropdown id="dropdown-aria" text="Dropdown ARIA" variant="primary" class="m-2">
    <b-dropdown-header id="dropdown-header-1">Groups</b-dropdown-header>
    <b-dropdown-item-button aria-describedby="dropdown-header-1">Add</b-dropdown-item-button>
    <b-dropdown-item-button aria-describedby="dropdown-header-1">Delete</b-dropdown-item-button>

    <b-dropdown-header id="dropdown-header-2">Users</b-dropdown-header>
    <b-dropdown-item-button aria-describedby="dropdown-header-2">Add</b-dropdown-item-button>
    <b-dropdown-item-button aria-describedby="dropdown-header-2">Delete</b-dropdown-item-button>

    <b-dropdown-divider></b-dropdown-divider>

    <b-dropdown-item-button>
      Something <strong>not</strong> associated with Users
    </b-dropdown-item-button>

  </b-dropdown>
</div>

<!-- b-dropdown-aria.vue -->

簡素化された代替手段として、<b-dropdown-group>を使用して、ヘッダーテキストを簡単に含まれるドロップダウンスブコンポーネントに関連付けることができます。

ドロップダウンは、ネイティブの<select>の動作をエミュレートするキーボードナビゲーションをサポートしています。

「Down」キーと「Up」キーでは、<b-dropdown-form> のサブコンポーネントにフォーカスを移動できませんが、ユーザーは「Tab」キーまたは「Shift」+「Tab」キーを使用して、メニュー内のフォームコントロールにフォーカスを移動できます。

実装に関する注記

アクセシビリティの理由から、ドロップダウンメニューはセマンティックな <ul> 要素と <li> 要素を使用してレンダリングされます。.dropdown-menu は <ul> 要素であり、ドロップダウンアイテム（アイテム、ボタン、テキスト、フォーム、ヘッダー、区切り線）は <li> 要素でラップされています。ドロップダウンメニュー内にカスタムアイテムを作成する場合は、プレーンな <li> 要素でラップしてください。

コンポーネントリファレンス

ソースコードを表示

<b-dropdown> コンポーネントのエイリアス
<b-dropdown> プロパティ
<b-dropdown> スロット
<b-dropdown> イベント

<b-dropdown> は、以下のエイリアスでも使用できます。

<b-dd>

注：コンポーネントエイリアスは、BootstrapVue全体をインポートする場合、またはコンポーネントグループプラグインを使用する場合にのみ使用できます。

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ (昇順でソートするにはクリック)	型 (昇順でソートするにはクリック)	デフォルト	説明
`block` v2.1.0+	`ブール値`	`false`	幅100%のトグルボタンをレンダリングします（親コンテナの幅に拡張されます）
`boundary`	`HTMLElement` または `String`	`'scrollParent'`	メニューのバウンダリコンストレイン：'scrollParent'、'window'、'viewport'、またはHTMLElementへの参照
`disabled`	`ブール値`	`false`	`true`に設定すると、コンポーネントの機能が無効になり、無効状態になります。
`dropleft`	`ブール値`	`false`	設定すると、メニューがボタンの左側に配置されます。
`dropright`	`ブール値`	`false`	設定すると、メニューがボタンの右側に配置されます。
`dropup`	`ブール値`	`false`	設定すると、メニューがボタンの上部に配置されます。
`html` 注意して使用してください。	`文字列`		トグルボタンに配置するHTML文字列、または分割モードでは分割ボタンに配置するHTML文字列。
`id`	`文字列`		レンダリングされたコンテンツの`id`属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます。
`lazy`	`ブール値`	`false`	設定すると、メニューが開いている場合にのみ、メニューコンテンツをDOMにマウントします。
`menu-class`	`Array` または `Object` または `String`		メニューコンテナに追加するCSSクラス（またはクラス群）
`no-caret`	`ブール値`	`false`	トグルボタンのキャレットインジケーターを非表示にします。
`no-flip`	`ブール値`	`false`	メニューの位置の自動反転を防ぎます。
`offset`	`Number` または `String`	`0`	メニューをシフトするピクセル数を指定します。負の値もサポートされます。
`popper-opts`	`オブジェクト`	`{}`	Popper.jsに渡す追加の設定
`right`	`ブール値`	`false`	メニューの右端をボタンの右端に揃えます。
`role`	`文字列`	`'menu'`	ARIA属性`role`を特定の値に設定します。
`size`	`文字列`		コンポーネントの外観のサイズを設定します。'sm'、'md'（デフォルト）、または'lg'
`split`	`ブール値`	`false`	設定すると、分割ボタンのドロップダウンがレンダリングされます。
`split-button-type`	`文字列`	`'button'`	分割ボタンの'type'属性に配置する値：'button'、'submit'、'reset'
`split-class` v2.2.0+	`Array` または `Object` または `String`		分割ボタンに追加するCSSクラス（またはクラス群）
`split-href`	`文字列`		分割ボタンのリンクのターゲットURLを示します。
`split-to`	`Object` または `String`		<router-link> プロパティ：分割ボタンのターゲットルートを示します。クリックすると、`to`プロパティの値が内部的に`router.push()`に渡されるため、値は文字列またはLocation記述子オブジェクトのいずれかになります。
`split-variant`	`文字列`		Bootstrapテーマカラーバリアントの1つを分割ボタンに適用します。デフォルトは'variant'プロパティの値です。
`text`	`文字列`		トグルボタンに配置するテキスト、または分割モードでは分割ボタンに配置するテキスト。
`toggle-attrs` v2.22.0+	`オブジェクト`	`{}`	トグルボタンに適用する追加の属性
`toggle-class`	`Array` または `Object` または `String`		トグルボタンに追加するCSSクラス（またはクラス群）
`toggle-tag` 注意して使用してください。	`文字列`	`'button'`	デフォルトのタグの代わりにレンダリングするHTMLタグを指定します。
`toggle-text`	`文字列`	`'Toggle dropdown'`	分割モードの場合にトグルに設定するARIAラベル（sr-only）
`variant`	`文字列`	`'secondary'`	Bootstrapテーマカラーバリアントの1つをコンポーネントに適用します。

<b-dropdown> は、<router-link> または <nuxt-link> コンポーネント（Nuxt.jsを使用している場合）の生成をサポートしています。router link（またはnuxt link）固有のプロパティの詳細については、Routerサポートセクションを参照してください。

警告：HTML文字列をサポートするプロパティ（*-html）は、生のユーザー提供値を渡すと、クロスサイトスクリプティング（XSS）攻撃に対して脆弱になる可能性があります。ユーザー入力は最初に適切にサニタイズする必要があります。

名前	スコープ付き	説明
`button-content`	いいえ	カスタムテキストをアイコンやその他のスタイルとともに実装するために使用できます。
`default`		ドロップダウンメニューコンテンツのオプションでスコープ付きのデフォルトスロット

イベント	引数	説明
`bv::dropdown::hide`	`bvEvent` - BvEventオブジェクト。bvEvent.preventDefault()を呼び出して非表示をキャンセルします。	ドロップダウンが非表示になる直前に`$root`で発行されます。キャンセル可能です。
`bv::dropdown::show`	`bvEvent` - BvEventオブジェクト。bvEvent.preventDefault()を呼び出して表示をキャンセルします。	ドロップダウンが表示される直前に`$root`で発行されます。キャンセル可能です。
`click`	`event` - ネイティブのクリックイベントオブジェクト	分割モードで分割ボタンがクリックされたときに発行されます。
`hidden`		ドロップダウンが非表示になったときに発行されます。
`hide`	`bvEvent` - BvEventオブジェクト。bvEvent.preventDefault()を呼び出して非表示をキャンセルします。	ドロップダウンが非表示になる直前に発行されます。キャンセル可能です。
`show`	`bvEvent` - BvEventオブジェクト。bvEvent.preventDefault()を呼び出して表示をキャンセルします。	ドロップダウンが表示される直前に発行されます。キャンセル可能です。
`shown`		ドロップダウンが表示されたときに発行されます。
`toggle`		トグルボタンがクリックされたときに発行されます。

ソースコードを表示

<b-dropdown-item> コンポーネントのエイリアス
<b-dropdown-item> プロパティ
<b-dropdown-item> スロット
<b-dropdown-item> イベント

<b-dropdown-item> は、以下のエイリアスでも使用できます。

<b-dd-item>

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ (昇順でソートするにはクリック)	型 (昇順でソートするにはクリック)	デフォルト	説明
`active`	`ブール値`	`false`	`true`に設定すると、コンポーネントがアクティブ状態になり、アクティブなスタイルが適用されます。
`active-class`	`文字列`		<router-link> プロパティ：リンクがアクティブなときに適用されるアクティブなCSSクラスを設定します。通常、これはクラス名'active'に設定します。
`append`	`ブール値`	`false`	<router-link> プロパティ：`append`プロパティを設定すると、相対パスが常に現在のパスに追加されます。
`disabled`	`ブール値`	`false`	`true`に設定すると、コンポーネントの機能が無効になり、無効状態になります。
`exact`	`ブール値`	`false`	<router-link> プロパティ：デフォルトのアクティブクラスの一致動作は包含一致です。このプロパティを設定すると、モードがルートと完全に一致するように強制されます。
`exact-active-class`	`文字列`		<router-link> プロパティ：完全一致でリンクがアクティブなときに適用されるアクティブなCSSクラスを設定します。通常、これはクラス名'active'に設定します。
`exact-path`	`ブール値`	`false`	<router-link> プロパティ：URLのパスセクションのみを使用して一致させることができます。クエリとハッシュセクションは無視されます。
`exact-path-active-class`	`文字列`		<router-link> プロパティ：完全パス一致でリンクがアクティブなときに適用されるアクティブなCSSクラスを設定します。通常、これはクラス名'active'に設定します。
`href`	`文字列`		<b-link> プロパティ: 標準的な a リンクのリンク先のURL を指定します。
`link-class` v2.9.0+	`Array` または `Object` または `String`		内部のリンク要素に適用するクラス名(複数可)
`no-prefetch`	`ブール値`	`false`	<nuxt-link> プロパティ: Nuxt.js アプリケーションのレスポンス性を向上させるために、リンクがビューポート内に表示されると、Nuxt.js はコード分割されたページを自動的にプリフェッチします。`no-prefetch` を設定すると、特定のリンクに対してこの機能が無効になります。
`prefetch` v2.15.0+	`ブール値`	`null`	<nuxt-link> プロパティ: Nuxt.js アプリケーションのレスポンス性を向上させるために、リンクがビューポート内に表示されると、Nuxt.js はコード分割されたページを自動的にプリフェッチします。`prefetch` を `true` または `false` に設定すると、`router.prefetchLinks` のデフォルト値が上書きされます。
`rel`	`文字列`	`null`	<b-link> プロパティ: レンダリングされたリンクに `rel` 属性を設定します。
`replace`	`ブール値`	`false`	<router-link> プロパティ: replace プロパティを設定すると、クリック時に `router.push()` の代わりに `router.replace()` が呼び出されるため、ナビゲーションは履歴レコードを残しません。
`router-component-name` v2.15.0+	`文字列`		<b-link> プロパティ: BootstrapVue は `<router-link>` と `<nuxt-link>` を自動的に検出します。`<router-link>` をベースとしたサードパーティのリンクコンポーネントを使用したい場合は、このプロパティにコンポーネント名を指定します。例：Gridsome を使用している場合は 'g-link' に設定します（`<router-link>` 固有のプロパティのみがコンポーネントに渡されます）。
`target`	`文字列`	`'_self'`	<b-link> プロパティ: レンダリングされたリンクに `target` 属性を設定します。
`to`	`Object` または `String`		<router-link> プロパティ: リンクのターゲットルートを指定します。クリックされると、to プロパティの値が内部的に `router.push()` に渡されるため、値は文字列または Location デスクリプターオブジェクトのいずれかになります。
`variant`	`文字列`		Bootstrapテーマカラーバリアントの1つをコンポーネントに適用します。

<b-dropdown-item> は <router-link> または <nuxt-link> コンポーネント（Nuxt.js を使用している場合）の生成をサポートします。ルーターリンク（または Nuxt リンク）固有のプロパティの詳細については、ルーターサポートのリファレンスセクションを参照してください。

名前	説明
`default`	ドロップダウンアイテムに配置するコンテンツ

イベント	引数	説明
`click`	ネイティブのクリックイベントオブジェクト	アイテムがクリックされたときに発生します。

ソースコードを表示

<b-dropdown-item-button> コンポーネントのエイリアス
<b-dropdown-item-button> プロパティ
<b-dropdown-item-button> スロット
<b-dropdown-item-button> イベント

<b-dropdown-item-button> は、以下のエイリアスでも使用できます。

<b-dropdown-item-btn>
<b-dd-item-button>
<b-dd-item-btn>

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ	型	デフォルト	説明
`active`	`ブール値`	`false`	`true`に設定すると、コンポーネントがアクティブ状態になり、アクティブなスタイルが適用されます。
`active-class`	`文字列`	`'active'`	<router-link> プロパティ：リンクがアクティブなときに適用されるアクティブなCSSクラスを設定します。通常、これはクラス名'active'に設定します。
`button-class` v2.9.0+	`Array` または `Object` または `String`		内部のボタン要素に適用するクラス名(複数可)
`disabled`	`ブール値`	`false`	`true`に設定すると、コンポーネントの機能が無効になり、無効状態になります。
`variant`	`文字列`		Bootstrapテーマカラーバリアントの1つをコンポーネントに適用します。

名前	説明
`default`	ドロップダウンアイテムボタンに配置するコンテンツ

イベント	引数	説明
`click`	ネイティブのクリックイベントオブジェクト	ボタンアイテムがクリックされたときに発生します。

関数型コンポーネント

ソースコードを表示

<b-dropdown-divider> コンポーネントのエイリアス
<b-dropdown-divider> プロパティ

<b-dropdown-divider> は、以下のエイリアスでも使用できます。

<b-dd-divider>

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ	型	デフォルト	説明
`tag`	`文字列`	`'hr'`	デフォルトのタグの代わりにレンダリングするHTMLタグを指定します。

関数型コンポーネント

ソースコードを表示

<b-dropdown-form> コンポーネントのエイリアス
<b-dropdown-form> プロパティ
<b-dropdown-form> スロット

<b-dropdown-form> は、以下のエイリアスでも使用できます。

<b-dd-form>

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ	型	デフォルト	説明
`disabled`	`ブール値`	`false`	`true`に設定すると、コンポーネントの機能が無効になり、無効状態になります。
`form-class` v2.2.0+	`Array` または `Object` または `String`		フォームに追加するCSSクラス名(複数可)
`id`	`文字列`		レンダリングされたコンテンツの`id`属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます。
`inline`	`ブール値`	`false`	設定すると、フォームはインラインモードになり、ラベル、フォームコントロール、ボタンが1つの水平行に表示されます。
`novalidate`	`ブール値`	`false`	設定すると、フォーム内のコントロールに対するブラウザのネイティブHTML5検証が無効になります。
`validated`	`ブール値`	`false`	設定すると、フォームにBootstrapクラス 'was-validated' が追加され、ネイティブブラウザの検証状態がトリガーされます。

名前	説明
`default`	ドロップダウンフォームに配置するコンテンツ

関数型コンポーネント

ソースコードを表示

<b-dropdown-text> コンポーネントのエイリアス
<b-dropdown-text> プロパティ
<b-dropdown-text> スロット

<b-dropdown-text> は、以下のエイリアスでも使用できます。

<b-dd-text>

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ	型	デフォルト	説明
`tag`	`文字列`	`'p'`	デフォルトのタグの代わりにレンダリングするHTMLタグを指定します。
`text-class`	`Array` または `Object` または `String`		内部の要素に適用するクラス名(複数可)
`variant`	`文字列`		Bootstrapテーマカラーバリアントの1つをコンポーネントに適用します。

名前	説明
`default`	ドロップダウンテキストに配置するコンテンツ

関数型コンポーネント

ソースコードを表示

<b-dropdown-group> コンポーネントのエイリアス
<b-dropdown-group> プロパティ
<b-dropdown-group> スロット

<b-dropdown-group> は、以下のエイリアスでも使用できます。

<b-dd-group>

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ	型	デフォルト	説明
`aria-describedby`	`文字列`		このコンポーネントに追加のコンテキストを提供する要素のID。`aria-describedby` 属性の値として使用されます。
`header`	`文字列`		ヘッダーに配置するテキストコンテンツ
`header-classes`	`Array` または `Object` または `String`		ヘッダーに追加するCSSクラス名(複数可)
`header-tag`	`文字列`	`'header'`	ヘッダーのデフォルトタグの代わりにレンダリングするHTMLタグを指定します。
`header-variant`	`文字列`		ヘッダーにBootstrapテーマカラーバリアントのいずれかを適用します。
`id`	`文字列`		レンダリングされたコンテンツの`id`属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます。

名前	説明
`default`	ドロップダウングループに配置するコンテンツ（アイテム）
`header`	ドロップダウングループのオプションのヘッダーコンテンツ

関数型コンポーネント

ソースコードを表示

<b-dropdown-header> コンポーネントのエイリアス
<b-dropdown-header> プロパティ
<b-dropdown-header> スロット

<b-dropdown-header> は、以下のエイリアスでも使用できます。

<b-dd-header>

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ	型	デフォルト	説明
`id`	`文字列`		レンダリングされたコンテンツの`id`属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます。
`tag`	`文字列`	`'header'`	デフォルトのタグの代わりにレンダリングするHTMLタグを指定します。
`variant`	`文字列`		Bootstrapテーマカラーバリアントの1つをコンポーネントに適用します。

名前	説明
`default`	ドロップダウンヘッダーに配置するコンテンツ

個々のコンポーネントのインポート

以下の名前付きエクスポートを使用して、個々のコンポーネントをプロジェクトにインポートできます。

コンポーネント	名前付きエクスポート	インポートパス
`<b-dropdown>`	`BDropdown`	`bootstrap-vue`
`<b-dropdown-item>`	`BDropdownItem`	`bootstrap-vue`
`<b-dropdown-item-button>`	`BDropdownItemButton`	`bootstrap-vue`
`<b-dropdown-divider>`	`BDropdownDivider`	`bootstrap-vue`
`<b-dropdown-form>`	`BDropdownForm`	`bootstrap-vue`
`<b-dropdown-text>`	`BDropdownText`	`bootstrap-vue`
`<b-dropdown-group>`	`BDropdownGroup`	`bootstrap-vue`
`<b-dropdown-header>`	`BDropdownHeader`	`bootstrap-vue`

例

import { BDropdown } from 'bootstrap-vue'
Vue.component('b-dropdown', BDropdown)

Vue.jsプラグインとしてのインポート

このプラグインには、上記にリストされているすべての個々のコンポーネントが含まれています。プラグインには、コンポーネントのエイリアスも含まれています。

名前付きエクスポート	インポートパス
`DropdownPlugin`	`bootstrap-vue`

例

import { DropdownPlugin } from 'bootstrap-vue'
Vue.use(DropdownPlugin)

ボタンコンテンツ

位置調整

メニューの配置

ドロップアップ

右または左にドロップ

自動「反転」

メニューオフセット

境界制約

高度なPopper.js設定

分割ボタンのサポート

分割ボタンのリンクサポート

分割ボタンの種類

スタイルオプション

サイズ変更

分割ボタンのカラーバリエーション

ブロックレベルのドロップダウン

非表示のキャレット

フォーム操作によるメニューの閉じ方

オプションでスコープされたデフォルトスロット

アクセシビリティ

ヘッダーとアクセシビリティ

キーボードナビゲーション

実装に関する注記

関連情報

コンポーネントリファレンス

個々のコンポーネントのインポート

Vue.jsプラグインとしてのインポート

ボタンコンテンツ

位置調整

メニューの配置

ドロップアップ

右または左にドロップ

自動「反転」

メニューオフセット

境界制約

高度なPopper.js設定

分割ボタンのサポート

分割ボタンのリンクサポート

分割ボタンの種類

スタイルオプション

サイズ変更

ドロップダウンのカラーバリエーション

分割ボタンのカラーバリエーション

ブロックレベルのドロップダウン

ドロップダウンスブコンポーネントの色バリエーション

非表示のキャレット

遅延ロードドロップダウン

サポートされているドロップダウンスブコンポーネント

<b-dropdown-item>

<b-dropdown-item-button>

<b-dropdown-divider>

<b-dropdown-text>

<b-dropdown-form>

<b-dropdown-group>

<b-dropdown-header>

フォーム操作によるメニューの閉じ方

$rootイベントによるドロップダウンの変更の監視

オプションでスコープされたデフォルトスロット

アクセシビリティ

ヘッダーとアクセシビリティ

キーボードナビゲーション

実装に関する注記

関連情報

コンポーネントリファレンス

コンポーネントエイリアス

プロパティ

スロット

イベント

コンポーネントエイリアス

プロパティ

スロット

イベント

コンポーネントのエイリアス

プロパティ

スロット

イベント

コンポーネントのエイリアス

プロパティ

コンポーネントのエイリアス

プロパティ

スロット

コンポーネントのエイリアス

プロパティ

スロット

コンポーネントのエイリアス

プロパティ

スロット

コンポーネントのエイリアス

プロパティ

スロット

個々のコンポーネントのインポート

Vue.jsプラグインとしてのインポート