Dropdown
<div class="card">
<div class="card-header code-header">
<h5>Single Button and Link Dropdown</h5>
</div>
<div class="card-body d-flex flex-wrap gap-2">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<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-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<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>
</div>
<div class="card">
<div class="card-header">
<h5>Dropdown submenu Menu</h5>
</div>
<div class="card-body d-flex flex-wrap gap-2">
<div class="app-dropdown">
<button class="btn btn-primary border-0 " type="button" data-bs-toggle="dropdown"
data-bs-auto-close="outside" aria-expanded="false">
Clickable Submenu
</button>
<div class="dropdown-menu mb-3">
<a href="#" class="dropdown-item">
<span> Action</span>
<i class="ti ti-user-plus ms-auto"></i>
</a>
<a href="#" class="dropdown-item">
<span>Another action</span>
<i class="ti ti-circles-relation ms-auto"></i>
</a>
<a href="#" class="dropdown-item">
<span>Something else here</span>
<i class="ti ti-message-circle ms-auto"></i>
</a>
<hr class="dropdown-divider">
<a class="dropdown-item border-0" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span>More Option</span>
<i class="ti ti-arrow-badge-right ms-auto"></i>
</a>
<div class="dropdown-menu sub-menu">
<a href="#" class="dropdown-item">
<span> Action</span>
<i class="ti ti-user-plus ms-auto"></i>
</a>
<a href="#" class="dropdown-item">
<span>Another action</span>
<i class="ti ti-circles-relation ms-auto"></i>
</a>
</div>
</div>
</div>
<div class="hover-dropdown app-hover-dropdown">
<button class="btn btn-primary dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown"
data-trigger="hover" aria-expanded="false">
Hoverable Dropdown
</button>
<ul class="dropdown-menu bg-dark">
<li class="dropdown-item">
<a href="#">
<span> Action</span>
</a>
<i class="ti ti-user-plus ms-auto"></i>
</li>
<li class="dropdown-item">
<a href="#">
<span>Another action</span>
</a>
<i class="ti ti-circles-relation ms-auto"></i>
</li>
<li class="dropdown-item">
<a href="#">
<span>Something else here</span>
</a>
<i class="ti ti-message-circle ms-auto"></i>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li class="hover-dropdown">
<a role="button" class="dropdown-item waves-effect waves-light" data-bs-toggle="dropdown"
data-trigger="hover" aria-expanded="false">
More Option
</a>
<ul class="dropdown-menu hover-submenu bg-dark">
<li class="dropdown-item">
<a href="#">
<span> Action</span>
</a>
<i class="ti ti-user-plus ms-auto"></i>
</li>
<li class="dropdown-item">
<a href="#">
<span>Another action</span>
</a>
<i class="ti ti-circles-relation ms-auto"></i>
</li>
<li class="dropdown-item">
<a href="#">
<span>Something else here</span>
</a>
<i class="ti ti-message-circle ms-auto"></i>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Dropdown Light Variant</h5>
</div>
<div class="card-body d-flex flex-wrap gap-2">
<div>
<div class="btn-group dropdown-light btn-rtl">
<button type="button" class="btn btn-light-primary ">Primary </button>
<button type="button" class="btn btn-light-primary dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
<i class="ti ti-arrow-badge-down f-s-16"></i>
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group dropdown-light btn-rtl">
<button type="button" class="btn btn-light-secondary">Secondary</button>
<button type="button" class="btn btn-light-secondary dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
<i class="ti ti-arrow-badge-down f-s-16"></i>
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group dropdown-light btn-rtl">
<button type="button" class="btn btn-light-success">Success</button>
<button type="button" class="btn btn-light-success dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
<i class="ti ti-arrow-badge-down f-s-16"></i>
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group dropdown-light btn-rtl">
<button type="button" class="btn btn-light-danger">Danger</button>
<button type="button" class="btn btn-light-danger dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
<i class="ti ti-arrow-badge-down f-s-16"></i>
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group dropdown-light btn-rtl">
<button type="button" class="btn btn-light-warning">Warning</button>
<button type="button" class="btn btn-light-warning dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
<i class="ti ti-arrow-badge-down f-s-16"></i>
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group dropdown-light btn-rtl">
<button type="button" class="btn btn-light-info">Info</button>
<button type="button" class="btn btn-light-info dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
<i class="ti ti-arrow-badge-down f-s-16"></i>
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group dropdown-light btn-rtl">
<button type="button" class="btn btn-light-light">Light</button>
<button type="button" class="btn btn-light-light dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
<i class="ti ti-arrow-badge-down f-s-16"></i>
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group dropdown-light btn-rtl">
<button type="button" class="btn btn-light-dark">Dark</button>
<button type="button" class="btn btn-light-dark dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
<i class="ti ti-arrow-badge-down f-s-16"></i>
</button>
<ul class="dropdown-menu">
<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>
</div>
<div class="card">
<div class="card-header">
<h5>Dropup Variation</h5>
</div>
<div class="card-body d-flex flex-wrap gap-2">
<div class="btn-group dropup dropdown-light btn-rtl">
<button type="button" class="btn btn-light-primary dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Dropup <i class="ti ti-arrow-narrow-up"></i>
</button>
<ul class="dropdown-menu">
<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 class="btn-group dropup dropdown-light btn-rtl">
<button type="button" class="btn btn-light-secondary">
Split dropup
</button>
<button type="button" class="btn btn-light-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown </span>
<i class="ti ti-arrow-narrow-up"></i>
</button>
<ul class="dropdown-menu">
<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 class="btn-group dropend dropdown-light">
<button type="button" class="btn btn-light-success dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Dropend <i class="ti ti-arrow-narrow-right"></i>
</button>
<ul class="dropdown-menu">
<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 class="btn-group dropend dropdown-light btn-rtl">
<button type="button" class="btn btn-light-danger">
Split dropend
</button>
<button type="button" class="btn btn-light-danger dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropend </span>
<i class="ti ti-arrow-narrow-right"></i>
</button>
<ul class="dropdown-menu">
<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 class="btn-group dropstart dropdown-light">
<button type="button" class="btn btn-light-warning dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="ti ti-arrow-narrow-left"></i> Dropstart
</button>
<ul class="dropdown-menu">
<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 class="btn-group dropstart dropdown-light btn-rtl">
<button type="button" class="btn btn-light-info dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropstart</span>
<i class="ti ti-arrow-narrow-left"></i>
</button>
<ul class="dropdown-menu">
<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>
<button type="button" class="btn btn-light-info">
Split dropstart
</button>
</div>
<div class="dropdown dropdown-light">
<button class="btn btn-light-light dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
Dropup <i class="ti ti-arrow-narrow-down"></i>
</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
<div class="btn-group dropdown-light btn-rtl">
<button type="button" class="btn btn-light-dark">Dropup</button>
<button type="button" class="btn btn-light-dark dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
<i class="ti ti-arrow-narrow-down"></i>
</button>
<ul class="dropdown-menu">
<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>
<div class="card">
<div class="card-header">
<h5>Menu Content Dropdown</h5>
</div>
<div class="card-body">
<div class="d-flex flex-wrap gap-2">
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Header <i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<div class="dropdown-header noti-title">
<h5 class="text-muted text-truncate mn-0">Welcome Jessie!</h5>
</div>
<!-- item-->
<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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Text <i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-menu-md p-3">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
</div>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Forms <i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-menu-md form-dropdown p-4">
<form>
<div class="mb-2">
<label class="form-label" for="exampleDropdownFormEmail">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail"
placeholder="email@example.com">
</div>
<div class="mb-2">
<label class="form-label" for="exampleDropdownFormPassword">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword"
placeholder="Password">
</div>
<div class="mb-2">
<div class="form-check custom-checkbox">
<input type="checkbox" class="form-check-input" id="rememberdropdownCheck">
<label class="form-check-label" for="rememberdropdownCheck">Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Dropdown Color Variant</h5>
</div>
<div class="card-body d-flex flex-wrap gap-2">
<div>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Primary
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Secondary
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Success
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Danger
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Warning
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Info
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Light
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Dark
</button>
<ul class="dropdown-menu">
<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>
</div>
<div class="card">
<div class="card-header">
<h5>Sizing Dropdown</h5>
</div>
<div class="card-body d-flex flex-wrap gap-3">
<div>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-secondary btn-lg">Large split button</button>
<button type="button"
class="btn btn-secondary opacity-75 btn-lg dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-success btn-sm dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
<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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-danger btn-sm"> Small split button</button>
<button type="button"
class="btn btn-danger opacity-75 btn-sm dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<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>
</div>
<div class="card">
<div class="card-header">
<h5>Dropdown Outline Variant</h5>
</div>
<div class="card-body d-flex flex-wrap gap-2">
<div>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Primary</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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button"
class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Secondary</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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Success</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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Danger</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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Warning</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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Info</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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-light dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Light</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>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split p-2"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dark</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>
</div>
<div class="card">
<div class="card-header">
<h5>Alignment Options</h5>
</div>
<div class="card-body d-flex flex-wrap gap-2 alignment-dropdown">
<div class="btn-group btn-rtl">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown <i class="ti ti-arrow-big-down-line"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Right-aligned menu <i class="ti ti-arrow-big-down-line"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown"
data-bs-display="static" aria-expanded="false"> right-aligned lg <i
class="ti ti-arrow-big-down-line"></i>
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group btn-rtl">
<button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown"
data-bs-display="static" aria-expanded="false"> left-aligned lg <i
class="ti ti-arrow-big-down-line"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="ti ti-arrow-big-left-line"></i> Dropstart
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Dropend <i class="ti ti-arrow-big-right-line"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false">
Dropup <i class="ti ti-arrow-big-up-line"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Auto close behavior</h5>
</div>
<div class="card-body d-flex flex-wrap gap-2">
<div class="btn-group dropdown-light btn-rtl">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
data-bs-auto-close="true" aria-expanded="false">
Default dropdown <i class="ti ti-circle-arrow-down"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropdown-light btn-rtl">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
data-bs-auto-close="inside" aria-expanded="false">
Clickable outside <i class="ti ti-circle-arrow-down"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropdown-light btn-rtl">
<button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown"
data-bs-auto-close="outside" aria-expanded="false">
Clickable inside <i class="ti ti-circle-arrow-down"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropdown-light btn-rtl">
<button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown"
data-bs-auto-close="false" aria-expanded="false">
Manual close <i class="ti ti-circle-arrow-down"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>With Icon Dropdown</h5>
</div>
<div class="card-body">
<div class="btn-group btn-rtl">
<button class="btn btn-light-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
<i class="ti ti-arrow-bar-down"></i> Default dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
</li>
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
</li>
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Hover Dropdown </h5>
</div>
<div class="card-body">
<div class="btn-group hover-dropdown">
<button type="button" class="btn btn-light-primary dropdown-toggle waves-effect waves-light"
data-bs-toggle="dropdown" data-trigger="hover" aria-expanded="false">Hover</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item">Action</a></li>
<li><a class="dropdown-item">Another action</a></li>
<li><a class="dropdown-item">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Icon</h5>
</div>
<div class="card-body">
<div class="btn-group dropdown-icon-none">
<button class="btn btn-light-success icon-btn b-r-4 dropdown-toggle" type="button"
data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
<i class="ti ti-capture"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
</li>
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
</li>
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
</li>
</ul>
</div>
</div>
</div>
Color Dropdown Menu
Custom Dropdown Menu
-
Brian Baker
Manager
- Action
- Another action
- Something else here
-
Brian Baker
Manager
- Action
- Another action
- Something else here