Dropdowns

Toggle contextual overlays for displaying lists of links and more.

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>

Colored Dropdown Buttons

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle"
            data-bs-toggle="dropdown">Primary</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
    </ul>
</div>

Split Button Dropdowns

<div class="btn-group">
    <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">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
    </ul>
</div>

Dropdown Directions

Dropup

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

Dropend

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

Dropstart

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