Dropdowns

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

On this page

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 button="secondary">
      Dropdown button
    </DropdownToggle>
    <DropdownMenu>
      <DropdownItem href="#">
        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 button="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 button="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 button="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 button="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 button="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 button="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 button="primary">
      Primary
    </b-button>
    <DropdownToggleSplit button="primary" />
    <DropdownMenu>
      <DropdownItem>Action</DropdownItem>
      <DropdownItem>Another action</DropdownItem>
      <DropdownItem>Something else here</DropdownItem>
      <DropdownItemDivider />
      <DropdownItem>Separated link</DropdownItem>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup>
    <b-button button="secondary">
      Secondary
    </b-button>
    <DropdownToggleSplit button="secondary" />
    <DropdownMenu>
      <DropdownItem>Action</DropdownItem>
      <DropdownItem>Another action</DropdownItem>
      <DropdownItem>Something else here</DropdownItem>
      <DropdownItemDivider />
      <DropdownItem>Separated link</DropdownItem>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup>
    <b-button button="success">
      Success
    </b-button>
    <DropdownToggleSplit button="success" />
    <DropdownMenu>
      <DropdownItem>Action</DropdownItem>
      <DropdownItem>Another action</DropdownItem>
      <DropdownItem>Something else here</DropdownItem>
      <DropdownItemDivider />
      <DropdownItem>Separated link</DropdownItem>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup>
    <b-button button="info">
      Info
    </b-button>
    <DropdownToggleSplit button="info" />
    <DropdownMenu>
      <DropdownItem>Action</DropdownItem>
      <DropdownItem>Another action</DropdownItem>
      <DropdownItem>Something else here</DropdownItem>
      <DropdownItemDivider />
      <DropdownItem>Separated link</DropdownItem>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup>
    <b-button button="warning">
      Warning
    </b-button>
    <DropdownToggleSplit button="warning" />
    <DropdownMenu>
      <DropdownItem>Action</DropdownItem>
      <DropdownItem>Another action</DropdownItem>
      <DropdownItem>Something else here</DropdownItem>
      <DropdownItemDivider />
      <DropdownItem>Separated link</DropdownItem>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup>
    <b-button button="danger">
      Danger
    </b-button>
    <DropdownToggleSplit button="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
      button="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
      button="secondary"
      size="lg"
    >
      Large split button
    </b-button>
    <DropdownToggleSplit
      button="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
      button="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
      button="secondary"
      size="sm"
    >
      Small split button
    </b-button>
    <DropdownToggleSplit
      button="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 button="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 button="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 button="secondary">
      Split dropup
    </b-button>
    <DropdownToggleSplit button="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 button="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 button="secondary">
      Split dropup
    </b-button>
    <DropdownToggleSplit button="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 button="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 button="secondary" />
    <b-button button="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 href="#">
      Regular link
    </DropdownItem>
    <DropdownItem active>
      Active link
    </DropdownItem>
    <DropdownItem href="#">
      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 href="#">
      Regular link
    </DropdownItem>
    <DropdownItem disabled>
      Disabled link
    </DropdownItem>
    <DropdownItem href="#">
      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
      button="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
      button="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
      button="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 button="secondary">
      Dropdown
    </DropdownToggle>
    <DropdownMenu>
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup>
    <DropdownToggle button="secondary">
      Right-aligned menu
    </DropdownToggle>
    <DropdownMenu alignment="end">
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup>
    <DropdownToggle button="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 button="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 button="secondary">
      Dropstart
    </DropdownToggle>
    <DropdownMenu>
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup placement="dropend">
    <DropdownToggle button="secondary">
      Dropend
    </DropdownToggle>
    <DropdownMenu>
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup placement="dropup">
    <DropdownToggle button="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.

vue

<template>
  <DropdownMenu
    padding="4"
    text-color="muted"
    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"
        button="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="4">
    <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"
      button="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 button="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 button="secondary">
        Reference
      </b-button>
      <DropdownToggleSplit button="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 button="secondary">
      Default dropdown
    </DropdownToggle>
    <DropdownMenu auto-close="true">
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup>
    <DropdownToggle button="secondary">
      Clickable inside
    </DropdownToggle>
    <DropdownMenu auto-close="inside">
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup>
    <DropdownToggle button="secondary">
      Clickable outside
    </DropdownToggle>
    <DropdownMenu auto-close="outside">
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
      <DropdownItem>Menu item</DropdownItem>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup>
    <DropdownToggle button="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 button="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>