Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Front dropdown plugin.
Bootstrap Dropdowns documentationSingle button
Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:
<!-- Dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
And with <a> elements:
<!-- Dropdown -->
<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" href="#" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
The best part is you can do this with any button variant, too:
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonPrimary" data-bs-toggle="dropdown" aria-expanded="false">
Primary
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonPrimary">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-white dropdown-toggle" type="button" id="dropdownMenuButtonWhite" data-bs-toggle="dropdown" aria-expanded="false">
White
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonWhite">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonSecondary" data-bs-toggle="dropdown" aria-expanded="false">
Secondary
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonSecondary">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButtonSuccess" data-bs-toggle="dropdown" aria-expanded="false">
Success
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonSuccess">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButtonInfo" data-bs-toggle="dropdown" aria-expanded="false">
Info
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonInfo">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButtonWarning" data-bs-toggle="dropdown" aria-expanded="false">
Warning
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonWarning">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButtonDanger" data-bs-toggle="dropdown" aria-expanded="false">
Danger
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonDanger">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
Dark
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
Light
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
Even with ghost buttons.
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-ghost-primary dropdown-toggle" type="button" id="dropdownMenuButtonGhostPrimary" data-bs-toggle="dropdown" aria-expanded="false">
Primary
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-ghost-secondary dropdown-toggle" type="button" id="dropdownMenuButtonGhostSecondary" data-bs-toggle="dropdown" aria-expanded="false">
Secondary
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-ghost-success dropdown-toggle" type="button" id="dropdownMenuButtonGhostSuccess" data-bs-toggle="dropdown" aria-expanded="false">
Success
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-ghost-info dropdown-toggle" type="button" id="dropdownMenuButtonGhostInfo" data-bs-toggle="dropdown" aria-expanded="false">
Info
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-ghost-warning dropdown-toggle" type="button" id="dropdownMenuButtonGhostWarning" data-bs-toggle="dropdown" aria-expanded="false">
Warning
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-ghost-danger dropdown-toggle" type="button" id="dropdownMenuButtonGhostDanger" data-bs-toggle="dropdown" aria-expanded="false">
Danger
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-ghost-dark dropdown-toggle" type="button" id="dropdownMenuButtonGhostDark" data-bs-toggle="dropdown" aria-expanded="false">
Dark
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-ghost-light dropdown-toggle" type="button" id="dropdownMenuButtonGhostLight" data-bs-toggle="dropdown" aria-expanded="false">
Light
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
Animation
Juice up Bootstrap's default dropdowns with animation by adding data-bs-dropdown-animation next to data-bs-toggle="dropdown"
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-lg btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonClickAnimation" data-bs-toggle="dropdown" aria-expanded="false" data-bs-dropdown-animation>
Click me
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonClickAnimation">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
Use data-bs-open-on-hover to animate on hover.
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-lg btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonHoverAnimation" data-bs-toggle="dropdown" aria-expanded="false" data-bs-open-on-hover data-bs-dropdown-animation>
Hover on me
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonHoverAnimation">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
Sizing
Button dropdowns work with buttons of all sizes.
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-lg btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonLg" data-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonLg">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonDefault" data-bs-toggle="dropdown" aria-expanded="false">
Default button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonDefault">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-sm btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonSm" data-bs-toggle="dropdown" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonSm">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
With icon
Use .dropdown-item-icon for icons.
<!-- Dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonWithIcon" data-bs-toggle="dropdown" aria-expanded="false">
With icon
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonWithIcon">
<a class="dropdown-item" href="#">
<i class="bi-house dropdown-item-icon"></i> Dashboard
</a>
<a class="dropdown-item" href="#">
<i class="bi-person dropdown-item-icon"></i> Profile
</a>
<a class="dropdown-item" href="#">
<i class="bi-bell dropdown-item-icon"></i> Settings
</a>
</div>
</div>
<!-- End Dropdown -->
Dropup
Trigger dropdown menus above elements by adding .dropup to the parent element.
<!-- Dropup -->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- End Dropup -->
<!-- Split Dropup -->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary">
Split dropup
</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- End Split Dropup -->
Dropright
Trigger dropdown menus at the right of the elements by adding .dropright to the parent element.
<!-- Dropright -->
<div class="btn-group dropright">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- End Dropright -->
<!-- Split Dropright -->
<div class="btn-group dropright">
<button type="button" class="btn btn-primary">
Split dropright
</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- End Split Dropright -->
Dropleft
Trigger dropdown menus at the left of the elements by adding .dropleft to the parent element.
<!-- Dropleft -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- End Dropleft -->
<!-- Split Dropleft -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-primary">
Split dropleft
</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- End Split Dropleft -->
Dropupend
Trigger dropdown menus at the bottom left of the elements by adding .dropupend to the parent element.
<!-- Dropupend -->
<div class="btn-group dropupend">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropupend
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- End Dropupend -->
<!-- Split Dropupend -->
<div class="btn-group dropupend">
<button type="button" class="btn btn-primary">
Split dropupend
</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- End Split Dropupend -->
Menu alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
<!-- Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End Dropdown -->
Responsive alignment
If you want to use responsive alignment, disable dynamic positioning by adding the data-display="static" attribute and use the responsive variation classes.
To align right the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl}-right.
<!-- Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End Dropdown -->
To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-right and .dropdown-menu{-sm|-md|-lg|-xl}-left.
<!-- Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End Dropdown -->
Dropdown card
Turns the default Bootstrap dropdown menu into a fully functional .card component. Utilize any available card options.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae rem autem impedit ad odio, enim tempore possimus non minus quod dignissimos ipsum eveniet odit, ratione molestiae, velit a dolorem!
<div class="d-flex">
<!-- Dropdown -->
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Card dropdown
</button>
<div class="dropdown-menu dropdown-card">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
</div>
Dropdown options
Use data-bs-offset or data-bs-reference to change the location of the dropdown.
<div class="d-flex">
<!-- Dropdown -->
<div class="dropdown me-1">
<button type="button" class="btn btn-primary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-offset="10,20">
Offset
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
<!-- Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- End Dropdown -->
</div>
Methods
| Parameters | Description |
|---|---|
data-bs-dropdown-animation
|
Adds animation to the dropdown menu |
data-bs-open-on-hover
|
Adds animation to the dropdown menu on hover |