Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list
<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 with a thin horizontal border
<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 adding
.dropend to the parent element
<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 the elements 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, including default and split 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>