Bootstrap Dropdowns

Overview

Dropdowns are toggleable overlays for displaying lists of links and actions.

Basic Dropdown

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        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</a></li>
    </ul>
</div>

Dropdown Directions

<!-- Dropup -->
<div class="dropup">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropup
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
    </ul>
</div>

<!-- Dropend -->
<div class="dropend">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropend
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
    </ul>
</div>

Menu Items

<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Regular link</a></li>
    <li><a class="dropdown-item active" href="#">Active link</a></li>
    <li><a class="dropdown-item disabled" href="#">Disabled link</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

Next Steps

Next: Bootstrap Modals →