Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown component.

Overview

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

They're toggled by clicking, not by hovering.

Examples

Wrap the dropdown's toggle (your button or link) and the dropdown menu within dropdown.

Dropdowns can be triggered from DropdownMenu elements to better fit your potential needs.

Single button

Any single button can be turned into a dropdown toggle with some markup changes.

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>

The best part is you can do this with any button variant, too:

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

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of DropdownToggleSplit for proper spacing around the dropdown caret.

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

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

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

Opt into darker dropdowns to match a dark navbar or custom style by adding dark attribute onto an existing DropdownMenu component.

No changes are required to the dropdown items.

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>

And putting it to use in a navbar:

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

Trigger dropdown menus above elements by addingm placement="dropup" attribute to the parent element.

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

Trigger dropdown menus at the right of the elements by adding placement="dropend" to the parent element.

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

Trigger dropdown menus at the left of the elements by adding placement="dropstart" to the parent element.

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

You can also create non-interactive dropdown items with text attribute. Feel free to style further with custom CSS or text utilities.

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

Add active attribute to items in the dropdown to **style them as 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

Add disabled attribute to items in the dropdown to style them as 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

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. You can change this with the directional .drop* classes, but you can also control them with additional modifier classes.

Add alignment="end" attribute to a DropdownMenu component to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning alignment="end" attribute will appear on the left side.

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

If you want to use responsive alignment, disable dynamic positioning by adding the display="static" attribute and use the responsive variation classes.

To align right the dropdown menu with the given breakpoint or larger, add 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>

To align left the dropdown menu with the given breakpoint or larger, add alignment="end" and 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

Taking most of the options shown above, here's a small kitchen sink demo of various dropdown alignment options in one place

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

Add a header to label sections of actions in any dropdown menu.

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

Dividers

Separate groups of related menu items with a divider.

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

Text

Place any freeform text within a dropdown menu with text and use spacing utilities .

Note that you'll likely need additional sizing styles to constrain the menu width.

    Some example text that's free-flowing within the dropdown menu.

    And this is more example text.

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

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

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

Use offset attribute or reference attribute to change the location of the dropdown.

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

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu.

You can use the auto-close="true" attribute option to change this behavior of the dropdown.

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>