ドロップダウン

Overview

ドロップダウンは、トグル可能で、リンクのリストなどを表示するためのコンテキストオーバーレイです。

これらは、ホバリングではなく、クリックで切り替えられます。

Examples

ドロップダウンのトグル（ボタンやリンク）とドロップダウンメニューを Dropdown コンポーネントで囲みます。

また、ドロップダウンアイテムは DropdownMenu コンポーネントで囲みます。

Single button

マークアップを変更するだけで、任意の単一のボタンをドロップダウントグルに変えることができます。

vue

<template>
 <Dropdown>
  <DropdownToggle color="secondary">
   Dropdown button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem to="/">
    Action
   </DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>

色の変更も可能です。

vue

<template>
 <Dropdown>
  <DropdownToggle color="primary">
   Primary
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated DropdownItemnk</DropdownItem>
  </DropdownMenu>
 </Dropdown>
 <!-- /btn-group -->
 <Dropdown>
  <DropdownToggle color="secondary">
   Secondary
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated DropdownItemnk</DropdownItem>
  </DropdownMenu>
 </Dropdown>
 <!-- /btn-group -->
 <Dropdown>
  <DropdownToggle color="success">
   Success
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated DropdownItemnk</DropdownItem>
  </DropdownMenu>
 </Dropdown>
 <!-- /btn-group -->
 <Dropdown>
  <DropdownToggle color="info">
   Info
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated DropdownItemnk</DropdownItem>
  </DropdownMenu>
 </Dropdown>
 <!-- /btn-group -->
 <Dropdown>
  <DropdownToggle color="warning">
   Warning
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated DropdownItemnk</DropdownItem>
  </DropdownMenu>
 </Dropdown>
 <!-- /btn-group -->
 <Dropdown>
  <DropdownToggle color="danger">
   Danger
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated DropdownItemnk</DropdownItem>
  </DropdownMenu>
 </Dropdown>
 <!-- /btn-group -->
</template>

Split button

同様に、単一ボタンのドロップダウンと実質的に同じマークアップで分割ボタンのドロップダウンを作成しますが、DropdownToggleSplit コンポーネント使用して、ドロップダウンのキャレットの周りの適切な間隔を確保します。

vue

<template>
 <ButtonGroup>
  <b-button color="primary">
   Primary
  </b-button>
  <DropdownToggleSplit color="primary" />
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup>
  <b-button color="secondary">
   Secondary
  </b-button>
  <DropdownToggleSplit color="secondary" />
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup>
  <b-button color="success">
   Success
  </b-button>
  <DropdownToggleSplit color="success" />
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup>
  <b-button color="info">
   Info
  </b-button>
  <DropdownToggleSplit color="info" />
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup>
  <b-button color="warning">
   Warning
  </b-button>
  <DropdownToggleSplit color="warning" />
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup>
  <b-button color="danger">
   Danger
  </b-button>
  <DropdownToggleSplit color="danger" />
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
</template>

Sizing

ボタンのドロップダウンは、デフォルトのドロップダウンボタンや分割されたドロップダウンボタンなど、あらゆるサイズのボタンで動作します。

vue

<template>
 <ButtonGroup>
  <DropdownToggle
   color="secondary"
   size="lg"
  >
   Large button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup>
  <b-button
   color="secondary"
   size="lg"
  >
   Large split button
  </b-button>
  <DropdownToggleSplit
   color="secondary"
   size="lg"
  />
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
</template>

vue

<template>
 <ButtonGroup>
  <DropdownToggle
   color="secondary"
   size="sm"
  >
   Small button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup>
  <b-button
   color="secondary"
   size="sm"
  >
   Small split button
  </b-button>
  <DropdownToggleSplit
   color="secondary"
   size="sm"
  />
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
</template>

Dark dropdowns

DropdownMenu コンポーネントにdark属性を追加することで、ダークドロップダウンにします。

DropdownItemsを変更する必要はありません。

vue

<template>
 <Dropdown>
  <DropdownToggle color="secondary">
   Droppdown button
  </DropdownToggle>
  <DropdownMenu dark>
   <DropdownItem active>
    Action
   </DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Something else here</DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>

そして、それをナビバーでも使用できます。

vue

<template>
 <Navbar
  expand="lg"
  theme="dark"
  background-color="dark"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler />
   <NavbarCollapse>
    <NavbarNavList>
     <NavItemDropdown>
      <NavItemDropdownToggle>Dropdown</NavItemDropdownToggle>
      <DropdownMenu dark>
       <DropdownItem>Action</DropdownItem>
       <DropdownItem>Another action</DropdownItem>
       <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
     </NavItemDropdown>
    </NavbarNavList>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

Directions

Dropup

親要素に placement="dropup" 属性を追加することで、上向きに表示できます。

vue

<template>
 <ButtonGroup placement="dropup">
  <DropdownToggle color="secondary">
   Dropup
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup placement="dropup">
  <b-button color="secondary">
   Split dropup
  </b-button>
  <DropdownToggleSplit color="secondary" />
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
</template>

Dropright

placement="dropend" を追加することで、右向きに表示できます。

vue

<template>
 <ButtonGroup placement="dropend">
  <DropdownToggle color="secondary">
   Dropup
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup placement="dropend">
  <b-button color="secondary">
   Split dropup
  </b-button>
  <DropdownToggleSplit color="secondary" />
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
</template>

Dropleft

親要素に placement="dropstart" を追加することで、左向きにできます。

vue

<template>
 <ButtonGroup placement="dropstart">
  <DropdownToggle color="secondary">
   Dropup
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup placement="dropstart">
  <DropdownToggleSplit color="secondary" />
  <b-button color="secondary">
   Split dropup
  </b-button>
  <DropdownMenu>
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
   <DropdownItemDivider />
   <DropdownItem>Separated link</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
</template>

Menu items

text 属性で非インタラクティブなドロップダウン項目を作成することもできます。カスタムCSSやテキストユーティリティを使用して、さらに自由にスタイルを設定してください。

vue

<template>
 <DropdownMenu>
  <DropdownItemText>Dropdown item text</DropdownItemText>
  <DropdownItem>Action</DropdownItem>
  <DropdownItem>Another action</DropdownItem>
  <DropdownItem>Something else here</DropdownItem>
 </DropdownMenu>
</template>

<style src="./example_dropdownMenu.scss" scoped></style>

Active

ドロップダウンの項目に active 属性を追加して、**アクティブのスタイルにします**。

vue

<template>
 <DropdownMenu>
  <DropdownItem to="/">
   Regular link
  </DropdownItem>
  <DropdownItem active>
   Active link
  </DropdownItem>
  <DropdownItem to="/">
   Another link
  </DropdownItem>
 </DropdownMenu>
</template>

<style src="./example_dropdownMenu.scss" scoped></style>

Disabled

ドロップダウンの項目に disabled 属性を追加して、無効化のスタイルにできます。

vue

<template>
 <DropdownMenu>
  <DropdownItem to="/">
   Regular link
  </DropdownItem>
  <DropdownItem disabled>
   Disabled link
  </DropdownItem>
  <DropdownItem to="/">
   Another link
  </DropdownItem>
 </DropdownMenu>
</template>

<style src="./example_dropdownMenu.scss" scoped></style>

Menu alignment

デフォルトでは、ドロップダウンメニューは自動的に上から100%の位置と親の左側に沿って配置されます。

ドロップダウンメニューを右寄せにするには、alignment="end" 属性を DropdownMenu コンポーネントに追加します。

vue

<template>
 <ButtonGroup>
  <DropdownToggle
   color="secondary"
   display="static"
  >
   Right-aligned but left aligned when large screen
  </DropdownToggle>
  <DropdownMenu alignment="end">
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
</template>

Responsive alignment

レスポンシブアライメントを使用したい場合は、display="static" 属性を追加して動的な位置合わせを無効にし、レスポンシブバリエーションクラスを使用します。

ドロップダウンメニューを右に配置するには、 alignment="{-sm|-md|-lg|-xl|-xxl}-end" を追加します。

vue

<template>
 <ButtonGroup>
  <DropdownToggle
   color="secondary"
   display="static"
  >
   Left-aligned but right aligned when large screen
  </DropdownToggle>
  <DropdownMenu alignment="lg-end">
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
</template>

左のドロップダウンメニューを指定されたブレークポイント以上の大きさに揃えるには、alignment="end" と alignment="{-sm|-md|-lg|-xl|-xxl}-start" を追加します。

vue

<template>
 <ButtonGroup>
  <DropdownToggle
   color="secondary"
   display="static"
  >
   Right-aligned but left aligned when large screen
  </DropdownToggle>
  <DropdownMenu alignment="end lg-start">
   <DropdownItem>Action</DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
</template>

Alignment options

上記のオプションのほとんどを利用して、様々なドロップダウンの配置オプションを一箇所に集めたデモを紹介します。

vue

<template>
 <ButtonGroup>
  <DropdownToggle color="secondary">
   Dropdown
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup>
  <DropdownToggle color="secondary">
   Right-aligned menu
  </DropdownToggle>
  <DropdownMenu alignment="end">
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup>
  <DropdownToggle color="secondary">
   Left-aligned, right-aligned lg
  </DropdownToggle>
  <DropdownMenu alignment="lg-end">
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup>
  <DropdownToggle color="secondary">
   Right-aligned, left-aligned lg
  </DropdownToggle>
  <DropdownMenu alignment="end lg-start">
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup placement="dropstart">
  <DropdownToggle color="secondary">
   Dropstart
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup placement="dropend">
  <DropdownToggle color="secondary">
   Dropend
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup placement="dropup">
  <DropdownToggle color="secondary">
   Dropup
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
</template>

Menu content

Headers

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

vue

<template>
 <DropdownMenu>
  <DropdownItem header>
   Dropdown header
  </DropdownItem>
  <DropdownItem>Action</DropdownItem>
  <DropdownItem>Another action</DropdownItem>
 </DropdownMenu>
</template>

Dividers

関連するメニュー項目のグループを仕切りで区切流ことができます。

vue

<template>
 <DropdownMenu>
  <DropdownItem>Action</DropdownItem>
  <DropdownItem>Another action</DropdownItem>
  <DropdownItem>Something else here</DropdownItem>
  <DropdownItemDivider />
  <DropdownItem>Separated link</DropdownItem>
 </DropdownMenu>
</template>

Text

フリーフォームのテキストをドロップダウンメニュー内にテキストで配置し spacing utilities を使用します。

メニューの幅を制限するために、追加のサイジングスタイルが必要になる可能性がもあります。

vue

<template>
 <DropdownMenu
  padding="3"
  text-color="body-secondary"
  style="max-width: 200px"
 >
  <b-p>Some example text that's free-flowing within the dropdown menu.</b-p>
  <b-p margin="b-0">
   And this is more example text.
  </b-p>
 </DropdownMenu>
</template>

Forms

ドロップダウンメニューの中にフォームを入れたり、ドロップダウンメニューにして、 margin or padding を使って、必要なネガティブスペースを与えます。

vue

<template>
 <DropdownMenu>
  <BForm>
   <BFormControl margin="3">
    <BFormLabel>Email address</BFormLabel>
    <BFormInput
     type="email"
     placeholder="email@example.com"
    />
   </BFormControl>
   <BFormControl margin="3">
    <BFormLabel>Password</BFormLabel>
    <BFormInput
     type="password"
     placeholder="Password"
    />
   </BFormControl>
   <BFormCheck margin="3">
    <BFormCheckInput />
    <BFormCheckLabel>Check me out</BFormCheckLabel>
   </BFormCheck>
   <b-button
    type="submit"
    color="primary"
    margin="3"
   >
    Submit
   </b-button>
  </BForm>
  <DropdownItemDivider />
  <DropdownItem>New around here? Sign up</DropdownItem>
  <DropdownItem>Forgot password?</DropdownItem>
 </DropdownMenu>
</template>

vue

<template>
 <DropdownMenu padding="3">
  <BFormControl margin="b-3">
   <BFormLabel>Email address</BFormLabel>
   <BFormInput
    type="email"
    placeholder="email@example.com"
   />
  </BFormControl>
  <BFormControl margin="b-3">
   <BFormLabel>Password</BFormLabel>
   <BFormInput
    type="password"
    placeholder="Password"
   />
  </BFormControl>
  <BFormCheck margin="b-3">
   <BFormCheckInput />
   <BFormCheckLabel>Check me out</BFormCheckLabel>
  </BFormCheck>
  <b-button
   type="submit"
   color="primary"
  >
   Submit
  </b-button>
 </DropdownMenu>
</template>

Dropdown options

ドロップダウンの位置を変更するには、 offset 属性または reference 属性を使用します。

vue

<template>
 <b-div flex>
  <Dropdown margin="e-1">
   <DropdownToggle color="secondary">
    Droppdown button
   </DropdownToggle>
   <DropdownMenu offset="10,20">
    <DropdownItem>Action</DropdownItem>
    <DropdownItem>Another action</DropdownItem>
    <DropdownItem>Something else here</DropdownItem>
   </DropdownMenu>
  </Dropdown>
  <ButtonGroup>
   <b-button color="secondary">
    Reference
   </b-button>
   <DropdownToggleSplit color="secondary" />
   <DropdownMenu reference="parent">
    <DropdownItem>Action</DropdownItem>
    <DropdownItem>Another action</DropdownItem>
    <DropdownItem>Something else here</DropdownItem>
    <DropdownItemDivider />
    <DropdownItem>Separated link</DropdownItem>
   </DropdownMenu>
  </ButtonGroup>
 </b-div>
</template>

Auto close behavior

デフォルトでは、ドロップダウンメニューの内側または外側をクリックすると、ドロップダウンメニューが閉じます。

auto-close="true" 属性を使って、このドロップダウンの動作を変更することができます。

vue

<template>
 <ButtonGroup>
  <DropdownToggle color="secondary">
   Default dropdown
  </DropdownToggle>
  <DropdownMenu auto-close="true">
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup>
  <DropdownToggle color="secondary">
   Clickable inside
  </DropdownToggle>
  <DropdownMenu auto-close="inside">
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup>
  <DropdownToggle color="secondary">
   Clickable outside
  </DropdownToggle>
  <DropdownMenu auto-close="outside">
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
 <ButtonGroup>
  <DropdownToggle color="secondary">
   Manual close
  </DropdownToggle>
  <DropdownMenu auto-close="false">
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
   <DropdownItem>Menu item</DropdownItem>
  </DropdownMenu>
 </ButtonGroup>
</template>

Auto activate

vue

<template>
 <Dropdown>
  <DropdownToggle color="secondary">
   Dropdown button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem to="/lang-en/components/dropdowns">
    lang-en
   </DropdownItem>
   <DropdownItem to="/lang-ja/components/dropdowns">
    lang-ja
   </DropdownItem>
   <DropdownItem to="/lang-en/getting-started/migration">
    lang-en migration
   </DropdownItem>
   <DropdownItem to="/lang-ja/getting-started/migration">
    lang-ja migration
   </DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>

Methods

demo

vue

<template>
 <b-button
  type="button"
  color="primary"
  @click="showDropdown"
 >
  Show
 </b-button>
 <b-button
  type="button"
  color="primary"
  @click="hideDropdown"
 >
  Hide
 </b-button>
 <b-button
  type="button"
  color="primary"
  @click="toggleDropdown"
 >
  Toggle
 </b-button>
 <Dropdown ref="demoDropdown">
  <DropdownToggle color="secondary">
   Dropdown button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem to="/">
    Action
   </DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>

<script setup lang="ts">
const demoDropdown = ref(null);
const showDropdown = () => {
 if (demoDropdown.value) {
  demoDropdown.value.show();
 }
};
const hideDropdown = () => {
 if (demoDropdown.value) {
  demoDropdown.value.hide();
 }
};
const toggleDropdown = () => {
 if (demoDropdown.value) {
  demoDropdown.value.toggle();
 }
};
</script>

Extend

Animation

vue

<template>
 <Dropdown>
  <DropdownToggle color="secondary">
   Dropdown button
  </DropdownToggle>
  <DropdownMenu class="animated animated-fade-in">
   <DropdownItem to="/">
    Action
   </DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>

Subtle theme colors

All colors

Item Icon

vue

<template>
 <Dropdown>
  <DropdownToggle
   color="light-subtle"
   icon="noto-v1:flag-for-flag-united-states"
  >
   English (US)
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem icon="noto-v1:flag-for-flag-united-states">
    English (US)
   </DropdownItem>
   <DropdownItem icon="noto-v1:flag-for-flag-germany">
    Deutsch
   </DropdownItem>
   <DropdownItem icon="noto-v1:flag-for-flag-spain">
    Español
   </DropdownItem>
   <DropdownItem icon="noto-v1:flag-for-flag-china">
    中文 (繁體)
   </DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>

Bootstrap