Tools / UI Kit / Bootstrap / Dropdowns

Dropdowns

Basic, icon, split, dark and notification dropdowns.

Basic Dropdown
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button"
            data-bs-toggle="dropdown" aria-expanded="false">
        Options
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Profile</a></li>
        <li><a class="dropdown-item" href="#">Settings</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item text-danger" href="#">Sign out</a></li>
    </ul>
</div>
Dropdown With Header
<ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Signed in as<br>[email protected]</h6></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Dashboard</a></li>
    <li><a class="dropdown-item" href="#">Team</a></li>
</ul>
Dropup
<div class="dropup">
    <button class="btn btn-primary dropdown-toggle" type="button"
            data-bs-toggle="dropdown" aria-expanded="false">
        Dropup
    </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</a></li>
    </ul>
</div>
Split Button Dropdown
<div class="btn-group">
    <button type="button" class="btn btn-primary">Save</button>
    <button type="button" class="btn btn-primary 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="#">Save as draft</a></li>
        <li><a class="dropdown-item" href="#">Save & publish</a></li>
        <li><a class="dropdown-item" href="#">Schedule</a></li>
    </ul>
</div>
Dark Dropdown
<ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item" href="#">Edit</a></li>
    <li><a class="dropdown-item" href="#">Duplicate</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item text-danger" href="#">Delete</a></li>
</ul>
Right-Aligned Dropdown
<ul class="dropdown-menu dropdown-menu-end">...</ul>
Checkbox Dropdown
<button class="btn btn-primary dropdown-toggle" type="button"
        data-bs-toggle="dropdown" data-bs-auto-close="outside">
    Filter
</button>
<ul class="dropdown-menu">
    <li><label class="dropdown-item"><input type="checkbox" checked> Active</label></li>
    <li><label class="dropdown-item"><input type="checkbox"> Pending</label></li>
    <li><label class="dropdown-item"><input type="checkbox"> Archived</label></li>
</ul>