Dropdowns

Dropdown Default Buttons


<div class="dropdown">
	<button class="btn btn-primary text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
		Dropdown button
	</button>
	<ul class="dropdown-menu bg-white">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
		<li><a class="dropdown-item" href="#">Something else here</a></li>
	</ul>
</div>
<div class="dropdown">
	<a class="btn btn-primary text-white py-2 px-3 dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
		Dropdown link
	</a>

	<ul class="dropdown-menu bg-white">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
		<li><a class="dropdown-item" href="#">Something else here</a></li>
	</ul>
</div>

Outline buttons


<div class="dropdown mt-2 me-2 d-inline-block">
	<button class="btn btn-primary text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
		Primary
	</button>
	<ul class="dropdown-menu bg-primary">
		<li><a class="dropdown-item text-white" href="#">Action</a></li>
		<li><a class="dropdown-item text-white" href="#">Another action</a></li>
		<li><a class="dropdown-item text-white" href="#">Something else here</a></li>
	</ul>
</div>

<div class="dropdown mt-2 me-2 d-inline-block">
	<button class="btn btn-secondary text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
		Secondary
	</button>
	<ul class="dropdown-menu bg-secondary">
		<li><a class="dropdown-item text-white" href="#">Action</a></li>
		<li><a class="dropdown-item text-white" href="#">Another action</a></li>
		<li><a class="dropdown-item text-white" href="#">Something else here</a></li>
	</ul>
</div>

<div class="dropdown mt-2 me-2 d-inline-block">
	<button class="btn btn-success text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
		Success
	</button>
	<ul class="dropdown-menu bg-success">
		<li><a class="dropdown-item text-white" href="#">Action</a></li>
		<li><a class="dropdown-item text-white" href="#">Another action</a></li>
		<li><a class="dropdown-item text-white" href="#">Something else here</a></li>
	</ul>
</div>

<div class="dropdown mt-2 me-2 d-inline-block">
	<button class="btn btn-info text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
		Info
	</button>
	<ul class="dropdown-menu bg-info">
		<li><a class="dropdown-item text-white" href="#">Action</a></li>
		<li><a class="dropdown-item text-white" href="#">Another action</a></li>
		<li><a class="dropdown-item text-white" href="#">Something else here</a></li>
	</ul>
</div>

<div class="dropdown mt-2 me-2 d-inline-block">
	<button class="btn btn-warning text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
		Warning
	</button>
	<ul class="dropdown-menu bg-warning">
		<li><a class="dropdown-item text-white" href="#">Action</a></li>
		<li><a class="dropdown-item text-white" href="#">Another action</a></li>
		<li><a class="dropdown-item text-white" href="#">Something else here</a></li>
	</ul>
</div>

<div class="dropdown mt-2 me-2 d-inline-block">
	<button class="btn btn-danger text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
		Danger
	</button>
	<ul class="dropdown-menu bg-danger">
		<li><a class="dropdown-item text-white" href="#">Action</a></li>
		<li><a class="dropdown-item text-white" href="#">Another action</a></li>
		<li><a class="dropdown-item text-white" href="#">Something else here</a></li>
	</ul>
</div>

<div class="dropdown mt-2 me-2 d-inline-block">
	<button class="btn btn-dark text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
		Dark
	</button>
	<ul class="dropdown-menu bg-dark">
		<li><a class="dropdown-item text-white" href="#">Action</a></li>
		<li><a class="dropdown-item text-white" href="#">Another action</a></li>
		<li><a class="dropdown-item text-white" href="#">Something else here</a></li>
	</ul>
</div>

<div class="dropdown mt-2 me-2 d-inline-block">
	<button class="btn btn-light text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
		Light
	</button>
	<ul class="dropdown-menu bg-light">
		<li><a class="dropdown-item text-dark" href="#">Action</a></li>
		<li><a class="dropdown-item text-dark" href="#">Another action</a></li>
		<li><a class="dropdown-item text-dark" href="#">Something else here</a></li>
	</ul>
</div>

Split Button Dropdown


<div class="mt-2 me-2 d-inline-block">
	<div class="btn-group">
		<button type="button" class="btn btn-primary text-white py-2 px-3">Primary</button>
		<button type="button" class="btn btn-primary text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
			<span class="visually-hidden">Primary</span>
		</button>
		<ul class="dropdown-menu bg-white">
			<li><a class="dropdown-item" href="#">Action</a></li>
			<li><a class="dropdown-item" href="#">Another action</a></li>
			<li><a class="dropdown-item" href="#">Something else here</a></li>
			<li><hr class="dropdown-divider"></li>
			<li><a class="dropdown-item" href="#">Separated link</a></li>
		</ul>
	</div>
</div>
<div class="mt-2 me-2 d-inline-block">
	<div class="btn-group">
		<button type="button" class="btn btn-secondary text-white py-2 px-3">Secondary</button>
		<button type="button" class="btn btn-secondary text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
			<span class="visually-hidden">Primary</span>
		</button>
		<ul class="dropdown-menu bg-white">
			<li><a class="dropdown-item" href="#">Action</a></li>
			<li><a class="dropdown-item" href="#">Another action</a></li>
			<li><a class="dropdown-item" href="#">Something else here</a></li>
			<li><hr class="dropdown-divider"></li>
			<li><a class="dropdown-item" href="#">Separated link</a></li>
		</ul>
	</div>
</div>
<div class="mt-2 me-2 d-inline-block">
	<div class="btn-group">
		<button type="button" class="btn btn-success text-white py-2 px-3">Success</button>
		<button type="button" class="btn btn-success text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
			<span class="visually-hidden">Success</span>
		</button>
		<ul class="dropdown-menu bg-white">
			<li><a class="dropdown-item" href="#">Action</a></li>
			<li><a class="dropdown-item" href="#">Another action</a></li>
			<li><a class="dropdown-item" href="#">Something else here</a></li>
			<li><hr class="dropdown-divider"></li>
			<li><a class="dropdown-item" href="#">Separated link</a></li>
		</ul>
	</div>
</div>
<div class="mt-2 me-2 d-inline-block">
	<div class="btn-group">
		<button type="button" class="btn btn-info text-white py-2 px-3">Info</button>
		<button type="button" class="btn btn-info text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
			<span class="visually-hidden">Info</span>
		</button>
		<ul class="dropdown-menu bg-white">
			<li><a class="dropdown-item" href="#">Action</a></li>
			<li><a class="dropdown-item" href="#">Another action</a></li>
			<li><a class="dropdown-item" href="#">Something else here</a></li>
			<li><hr class="dropdown-divider"></li>
			<li><a class="dropdown-item" href="#">Separated link</a></li>
		</ul>
	</div>
</div>
<div class="mt-2 me-2 d-inline-block">
	<div class="btn-group">
		<button type="button" class="btn btn-warning text-white py-2 px-3">Warning</button>
		<button type="button" class="btn btn-warning text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
			<span class="visually-hidden">Warning</span>
		</button>
		<ul class="dropdown-menu bg-white">
			<li><a class="dropdown-item" href="#">Action</a></li>
			<li><a class="dropdown-item" href="#">Another action</a></li>
			<li><a class="dropdown-item" href="#">Something else here</a></li>
			<li><hr class="dropdown-divider"></li>
			<li><a class="dropdown-item" href="#">Separated link</a></li>
		</ul>
	</div>
</div>
<div class="mt-2 me-2 d-inline-block">
	<div class="btn-group">
		<button type="button" class="btn btn-danger text-white py-2 px-3">Danger</button>
		<button type="button" class="btn btn-danger text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
			<span class="visually-hidden">Danger</span>
		</button>
		<ul class="dropdown-menu bg-white">
			<li><a class="dropdown-item" href="#">Action</a></li>
			<li><a class="dropdown-item" href="#">Another action</a></li>
			<li><a class="dropdown-item" href="#">Something else here</a></li>
			<li><hr class="dropdown-divider"></li>
			<li><a class="dropdown-item" href="#">Separated link</a></li>
		</ul>
	</div>
</div>
<div class="mt-2 me-2 d-inline-block">
	<div class="btn-group">
		<button type="button" class="btn btn-dark text-white py-2 px-3">Dark</button>
		<button type="button" class="btn btn-dark text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
			<span class="visually-hidden">Dark</span>
		</button>
		<ul class="dropdown-menu bg-white">
			<li><a class="dropdown-item" href="#">Action</a></li>
			<li><a class="dropdown-item" href="#">Another action</a></li>
			<li><a class="dropdown-item" href="#">Something else here</a></li>
			<li><hr class="dropdown-divider"></li>
			<li><a class="dropdown-item" href="#">Separated link</a></li>
		</ul>
	</div>
</div>
<div class="mt-2 me-2 d-inline-block">
	<div class="btn-group">
		<button type="button" class="btn btn-light text-white py-2 px-3">Light</button>
		<button type="button" class="btn btn-light text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
			<span class="visually-hidden">Light</span>
		</button>
		<ul class="dropdown-menu bg-white">
			<li><a class="dropdown-item" href="#">Action</a></li>
			<li><a class="dropdown-item" href="#">Another action</a></li>
			<li><a class="dropdown-item" href="#">Something else here</a></li>
			<li><hr class="dropdown-divider"></li>
			<li><a class="dropdown-item" href="#">Separated link</a></li>
		</ul>
	</div>
</div>

Buttons With Icon


<div class="dropdown">
	<button class="btn btn-primary text-primary bg-transparent p-0 border-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
		Dropdown button
	</button>
	<ul class="dropdown-menu bg-white">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
		<li><a class="dropdown-item" href="#">Something else here</a></li>
	</ul>
</div>
<div class="dropdown">
	<a class="btn btn-primary text-primary bg-transparent p-0 border-0 dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
		Dropdown link
	</a>

	<ul class="dropdown-menu bg-white">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
		<li><a class="dropdown-item" href="#">Something else here</a></li>
	</ul>
</div>

Rounded Buttons


<ul class="dropdown-menus bg-white mb-0 list-unstyled p-3 rounded-2" style="box-shadow: 0px 10px 35px 0px rgba(50, 110, 189, 0.20);">
	<li><a class="dropdown-item fs-14 mb-2" href="#">Today</a></li>
	<li><a class="dropdown-item fs-14 mb-2" href="#">Last 7 Days</a></li>
	<li><a class="dropdown-item fs-14 mb-2" href="#">Last Month</a></li>
	<li><a class="dropdown-item fs-14 mb-2" href="#">Last 12 Months</a></li>
	<li><a class="dropdown-item fs-14 mb-0" href="#">All Time</a></li>
</ul>

<ul class="dropdown-menus bg-white mb-0 list-unstyled p-3 rounded-2" style="box-shadow: 0px 10px 35px 0px rgba(50, 110, 189, 0.20);">
	<li><a class="dropdown-item fs-14 mb-2" href="#"><i class="ri-stackshare-line"></i> Share</a></li>
	<li><a class="dropdown-item fs-14 mb-2" href="#"><i class="ri-edit-line"></i> Last 7 Days</a></li>
	<li><a class="dropdown-item fs-14 mb-0" href="#"><i class="ri-delete-bin-7-line"></i> Last Month</a></li>
</ul>

<ul class="dropdown-menus bg-white mb-0 list-unstyled p-3 rounded-2" style="box-shadow: 0px 10px 35px 0px rgba(50, 110, 189, 0.20);">
	<li><a class="dropdown-item fs-14 mb-2" href="#"><i class="ri-user-line"></i> Profile</a></li>
	<li><a class="dropdown-item fs-14 mb-2" href="#"><i class="ri-settings-3-line"></i> Settings</a></li>
	<li><a class="dropdown-item fs-14 mb-0" href="#"><i class="ri-logout-circle-line"></i> Logout</a></li>
</ul>