Dropdowns
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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 -->
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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" 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 -->
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-xs btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonXs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonXs">
<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 -->
Also, .dropdown-menu-lg and .dropdown-menu-sm sizes available for menu.
<!-- Dropdown -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuLg" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large menu
</button>
<div class="dropdown-menu dropdown-menu-lg" aria-labelledby="dropdownMenuLg">
<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="dropdownMenuSm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small menu
</button>
<div class="dropdown-menu dropdown-menu-sm" aria-labelledby="dropdownMenuSM">
<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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
With icon
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButtonWithIcon">
<a class="dropdown-item" href="#">
<i class="tio-home-outlined dropdown-item-icon"></i> Dashboard
</a>
<a class="dropdown-item" href="#">
<i class="tio-user-outlined dropdown-item-icon"></i> Profile
</a>
<a class="dropdown-item" href="#">
<i class="tio-tune 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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">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-toggle="dropdown" aria-haspopup="true" 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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">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 -->
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-toggle="dropdown" aria-haspopup="true" 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 -->
Hover effect
Add hover animation with hs-unfold.js.
This example uses HS Unfold library.
<!-- Unfold -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-primary dropdown-toggle" href="javascript:;"
data-hs-unfold-options='{
"target": "#dropdownHover",
"type": "css-animation",
"event": "hover"
}'>Dropdow on hover</a>
<div id="dropdownHover" class="hs-unfold-content dropdown-unfold dropdown-menu">
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Unfold -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
<script>
$(document).on('ready', function () {
// initialization of unfold
$('.js-hs-unfold-invoker').each(function () {
var unfold = new HSUnfold($(this)).init();
});
});
</script>
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-toggle="dropdown" aria-haspopup="true" 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-offset or data-reference to change the location of the dropdown.
Heads up! These options don't work in navbar.
<div class="d-flex">
<!-- Dropdown -->
<div class="dropdown mr-1">
<button type="button" class="btn btn-primary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" 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">Reference</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
<span class="sr-only">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>