Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown component.
Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
They're toggled by clicking, not by hovering.
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.
Any single button can be turned into a dropdown toggle with some markup changes.
<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:
<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>
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.
<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>
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
<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>
<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>
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.
<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:
<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>
Trigger dropdown menus above elements by addingm placement="dropup"
attribute to the parent element.
<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>
Trigger dropdown menus at the right of the elements by adding placement="dropend"
to the parent element.
<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>
Trigger dropdown menus at the left of the elements by adding placement="dropstart"
to the parent element.
<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>
You can also create non-interactive dropdown items with text
attribute. Feel free to style further with custom CSS or text utilities.
<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>
Add active
attribute to items in the dropdown to **style them as active**.
<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>
Add disabled
attribute to items in the dropdown to style them as disabled.
<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>
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.
<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>
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"
.
<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"
.
<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>
Taking most of the options shown above, here's a small kitchen sink demo of various dropdown alignment options in one place
<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>
Add a header to label sections of actions in any dropdown menu.
<template>
<DropdownMenu>
<DropdownItem header>
Dropdown header
</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
</DropdownMenu>
</template>
Separate groups of related menu items with a divider.
<template>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItemDivider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</template>
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.
<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>
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.
<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>
<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>
Use offset
attribute or reference
attribute to change the location of the dropdown.
<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>
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.
<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>
<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>