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:voiud(0);">Link 1</a><a class="dropdown-item" href="javascript:voiud(0);">Link 2</a><a class="dropdown-item" href="javascript:voiud(0);">Link 3</a></div></div></div>Dropdown Divider
The .dropdown-dividerclass 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:voiud(0);">Link 1</a><a class="dropdown-item" href="javascript:voiud(0);">Link 2</a><a class="dropdown-item" href="javascript:voiud(0);">Link 3</a><div class="dropdown-divider"></div><a class="dropdown-item" href="javascript:voiud(0);">Another link</a></div></div></div>Dropdown Header
The .dropdown-headerclass 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:voiud(0);">Link 1</a><a class="dropdown-item" href="javascript:voiud(0);">Link 2</a><a class="dropdown-item" href="javascript:voiud(0);">Link 3</a><h5 class="dropdown-header">Dropdown header</h5><a class="dropdown-item" href="javascript:voiud(0);">Another link</a></div></div></div>Disable and Active items
The .dropdown-headerclass 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:voiud(0);">Normal</a><a class="dropdown-item active" href="javascript:voiud(0);">Active</a><a class="dropdown-item disabled" href="javascript:voiud(0);">Disabled</a></div></div></div>Align Right
To right-align the dropdown,add the .dropdown-menu-endclass 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:voiud(0);">Link 1</a><a class="dropdown-item" href="javascript:voiud(0);">Link 2</a><a class="dropdown-item" href="javascript:voiud(0);">Link 3</a></div></div></div>Dropup
The .dropupclass 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:voiud(0);">Link 1</a><a class="dropdown-item" href="javascript:voiud(0);">Link 2</a><a class="dropdown-item" href="javascript:voiud(0);">Link 3</a></div></div>javascript:voiud(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:voiud(0);">Link 1</a><a class="dropdown-item" href="javascript:voiud(0);">Link 2</a><a class="dropdown-item" href="javascript:voiud(0);">Link 3</a></div></div></div>Dropright
Trigger dropdown menus at the right of the elements by adding .dropendto 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:voiud(0);">Link 1</a><a class="dropdown-item" href="javascript:voiud(0);">Link 2</a><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Link 1</a><a class="dropdown-item" href="javascript:voiud(0);">Link 2</a><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Link 1</a><a class="dropdown-item" href="javascript:voiud(0);">Link 2</a><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Link 1</a><a class="dropdown-item" href="javascript:voiud(0);">Link 2</a><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Action</a><a class="dropdown-item" href="javascript:voiud(0);">Another action</a><a class="dropdown-item" href="javascript:voiud(0);">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="javascript:voiud(0);">Separated link</a></div></div>javascript:voiud(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:voiud(0);">Action</a><a class="dropdown-item" href="javascript:voiud(0);">Another action</a><a class="dropdown-item" href="javascript:voiud(0);">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Action</a><a class="dropdown-item" href="javascript:voiud(0);">Another action</a><a class="dropdown-item" href="javascript:voiud(0);">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Action</a><a class="dropdown-item" href="javascript:voiud(0);">Another action</a><a class="dropdown-item" href="javascript:voiud(0);">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Action</a><a class="dropdown-item" href="javascript:voiud(0);">Another action</a><a class="dropdown-item" href="javascript:voiud(0);">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Action</a><a class="dropdown-item" href="javascript:voiud(0);">Another action</a><a class="dropdown-item" href="javascript:voiud(0);">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Action</a><a class="dropdown-item" href="javascript:voiud(0);">Another action</a><a class="dropdown-item" href="javascript:voiud(0);">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Action</a><a class="dropdown-item" href="javascript:voiud(0);">Another action</a><a class="dropdown-item" href="javascript:voiud(0);">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Action</a><a class="dropdown-item" href="javascript:voiud(0);">Another action</a><a class="dropdown-item" href="javascript:voiud(0);">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Action</a><a class="dropdown-item" href="javascript:voiud(0);">Another action</a><a class="dropdown-item" href="javascript:voiud(0);">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="javascript:voiud(0);">Separated link</a></div></div></div>Custom style
Use .custom-dropdownthis 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:voiud(0);">Last 1 Month</a><a class="dropdown-item" href="javascript:voiud(0);">Last 6 Month</a><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Last 1 Month</a><a class="dropdown-item" href="javascript:voiud(0);">Last 6 Month</a><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Last 1 hour</a><a class="dropdown-item" href="javascript:voiud(0);">Last 2 hour</a><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Last 1 Month</a><a class="dropdown-item" href="javascript:voiud(0);">Last 6 Month</a><a class="dropdown-item" href="javascript:voiud(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 m-r-5"></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:voiud(0);">6 AM</a><a class="dropdown-item" href="javascript:voiud(0);">9 AM</a><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">May 20,2018 To June 20,2018</a><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Option 1</a><a class="dropdown-item" href="javascript:voiud(0);">Option 2</a><a class="dropdown-item" href="javascript:voiud(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:voiud(0);">Option 1</a><a class="dropdown-item" href="javascript:voiud(0);">Option 2</a><a class="dropdown-item" href="javascript:voiud(0);">Option 3</a></div></div></div></div>