Dropdown
Dropdown.
Make use of Bootstrap's unique Dropdown styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
Dropdown on BootstrapDropdown
Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value.
<div class="basic-dropdown">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
</div>
</div>
</div>Dropdown Divider
The
.dropdown-divider class is used to separate links inside
the dropdown menu.
<div class="basic-dropdown">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Another link</a>
</div>
</div>
</div>
Dropdown Header
The
.dropdown-header class is used to add headers inside the
dropdown menu
<div class="basic-dropdown">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<h5 class="dropdown-header">Dropdown header</h5>
<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
<h5 class="dropdown-header">Dropdown header</h5>
<a class="dropdown-item" href="javascript:void(0);">Another link</a>
</div>
</div>
</div>Disable and Active items
The
.dropdown-header class is used to add headers inside the
dropdown menu
<div class="basic-dropdown">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Normal</a>
<a class="dropdown-item active" href="javascript:void(0);">Active</a>
<a class="dropdown-item disabled" href="javascript:void(0);">Disabled</a>
</div>
</div>
</div>Align Right
To right-align the dropdown, add the
.dropdown-menu-end class to the element with
.dropdown-menu
<div class="basic-dropdown">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
</div>
</div>
</div>
Dropup
The
.dropup class makes the dropdown menu expand upwards
instead of downwards
<div class="basic-dropdown">
<!-- Default dropup button -->
<div class="btn-group dropup mb-1">
<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
Dropup
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
</div>
</div>javascript:void(0);
<!-- Split dropup button -->
<div class="btn-group dropup mb-1">
<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">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
</div>
</div>
</div>Dropright
Trigger dropdown menus at the right of the elements
by
.dropend to the parent
<div class="basic-dropdown">
<!-- Default dropright button -->
<div class="btn-group dropend mb-1">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropright
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropend mb-1">
<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">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
</div>
</div>
</div>
dropstart
Trigger dropdown menus at the right of by adding
.dropstart to the parent element
<div class="basic-dropdown">
<!-- Default dropstart button -->
<div class="btn-group dropstart mb-1">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
dropstart
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
</div>
</div>
<!-- Split dropstart button -->
<div class="btn-group mb-1">
<div class="btn-group dropstart " role="group">
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
<span class="sr-only">Toggle dropstart</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
</div>
</div>
<button type="button" class="btn btn-primary">
Split dropstart
</button>
</div>
</div>
Button Dropdowns
<div class="button-dropdown">
<div class="btn-group mb-1">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>javascript:void(0);
<div class="btn-group mb-1">
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-1">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-1">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-1">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-1">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
</div>
Sizing
Button dropdowns work with buttons of all sizes dropdown buttons.
<div class="dropdown-size">
<!-- Large button groups (default and split) -->
<div class="btn-group mb-1">
<button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown">
Large button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-1">
<button class="btn btn-primary btn-lg" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split" data-bs-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="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<!-- Small button groups (default and split) -->
<div class="btn-group mb-1">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
Small button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-1">
<button class="btn btn-primary btn-sm" type="button">
Small split button
</button>
<button type="button" class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split" data-bs-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="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
</div>
Custom style
Use
.custom-dropdown this class for this style
Last 7 days
<div class="row">
<div class="col-xl-3">
<div class="dropdown custom-dropdown">
<div data-bs-toggle="dropdown">Last 7 days
<i class="fa fa-angle-down ms-3"></i>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript:void(0);">Last 1 Month</a>
<a class="dropdown-item" href="javascript:void(0);">Last 6 Month</a>
<a class="dropdown-item" href="javascript:void(0);">Last 10 Month</a>
</div>
</div>
</div>
<div class="col-xl-3">
<div class="dropdown custom-dropdown">
<button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="dropdown">Last 7 days
<i class="fa fa-angle-down ms-3"></i>
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript:void(0);">Last 1 Month</a>
<a class="dropdown-item" href="javascript:void(0);">Last 6 Month</a>
<a class="dropdown-item" href="javascript:void(0);">Last 10 Month</a>
</div>
</div>
</div>
<div class="col-xl-3">
<div class="dropdown custom-dropdown">
<button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="dropdown">Last 1 Hour
<i class="fa fa-angle-down ms-3"></i>
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript:void(0);">Last 1 hour</a>
<a class="dropdown-item" href="javascript:void(0);">Last 2 hour</a>
<a class="dropdown-item" href="javascript:void(0);">Last 3 hour</a>
</div>
</div>
</div>
<div class="col-xl-3">
<div class="dropdown custom-dropdown">
<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="dropdown">Last 7 days
<i class="fa fa-angle-down ms-3"></i>
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript:void(0);">Last 1 Month</a>
<a class="dropdown-item" href="javascript:void(0);">Last 6 Month</a>
<a class="dropdown-item" href="javascript:void(0);">Last 10 Month</a>
</div>
</div>
</div>
<div class="col-xl-3">
<div class="dropdown custom-dropdown">
<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="dropdown">
<i class="ti-search mr-3"></i> 3 AM
<i class="fa fa-angle-down ms-3"></i>
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript:void(0);">6 AM</a>
<a class="dropdown-item" href="javascript:void(0);">9 AM</a>
<a class="dropdown-item" href="javascript:void(0);">12 AM</a>
</div>
</div>
</div>
<div class="col-xl-3">
<div class="dropdown custom-dropdown">
<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="dropdown">
<i class="ti-calendar m-r-5"></i> March 20, 2018 To April
20, 2018
<i class="fa fa-angle-down ms-3"></i>
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript:void(0);">May 20, 2018 To June 20,
2018</a>
<a class="dropdown-item" href="javascript:void(0);">July 20, 2018 To August
20, 2018</a>
</div>
</div>
</div>
<div class="col-xl-3">
<div class="dropdown custom-dropdown">
<div class="btn sharp btn-primary tp-btn" data-bs-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="12" cy="5" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="12" cy="19" r="2"/></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript:void(0);">Option 1</a>
<a class="dropdown-item" href="javascript:void(0);">Option 2</a>
<a class="dropdown-item" href="javascript:void(0);">Option 3</a>
</div>
</div>
</div>
<div class="col-xl-3">
<div class="dropdown custom-dropdown">
<div class="btn sharp btn-primary tp-btn" data-bs-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="12" cy="5" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="12" cy="19" r="2"/></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript:void(0);">Option 1</a>
<a class="dropdown-item" href="javascript:void(0);">Option 2</a>
<a class="dropdown-item" href="javascript:void(0);">Option 3</a>
</div>
</div>
</div>
</div>