#### Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Table of Content

- Examples
  1. Single button dropdowns
  2. Split button dropdowns
  3. Variation

#### Examples

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs.

##### Single button dropdowns

Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either `<button>` elements:

    									<div class="dropdown">
    										<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    											Dropdown button
    										</button>
    										<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    											<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>
    									</div>

And with `<a>` elements:

Dropdown link

    									<div class="dropdown show">
    										<a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    											Dropdown link
    										</a>

    										<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    											<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>
    									</div>

The best part is you can do this with any button variant, too:

    									<!-- Example single danger button -->
    									<div class="btn-group">
    										<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    											Action
    										</button>
    										<div class="dropdown-menu">
    											<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>

##### Split button dropdowns

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` for proper spacing around the dropdown caret.

We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.

    									<!-- Example split danger button -->
    									<div class="btn-group">
    										<button type="button" class="btn btn-danger">Action</button>
    										<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    											<span class="sr-only">Toggle Dropdown</span>
    										</button>
    										<div class="dropdown-menu">
    											<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>

##### Variation

    									<div class="btn-group dropdown">
    										<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-bs-toggle="dropdown">
    											DropDown
    										</button>
    										<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    											<a class="dropdown-item" href="#">Action</a>
    											<a class="dropdown-item" href="#">Another action</a>
    											<div class="dropdown-divider"></div>
    											<a class="dropdown-item" href="#">Something else here</a>
    										</ul>
    									</div>

    									<div class="btn-group dropup">
    										<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-bs-toggle="dropdown">
    											DropUp
    										</button>
    										<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    											<a class="dropdown-item" href="#">Action</a>
    											<a class="dropdown-item" href="#">Another action</a>
    											<div class="dropdown-divider"></div>
    											<a class="dropdown-item" href="#">Something else here</a>
    										</ul>
    									</div>

    									<div class="btn-group dropend">
    										<button type="button" class="btn btn-success btn-round dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    											DropEnd
    										</button>
    										<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    											<a class="dropdown-item" href="#">Action</a>
    											<a class="dropdown-item" href="#">Another action</a>
    											<div class="dropdown-divider"></div>
    											<a class="dropdown-item" href="#">Something else here</a>
    										</ul>
    									</div>

    									<div class="btn-group dropstart">
    										<button type="button" class="btn btn-black btn-border dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    											DropStart
    										</button>
    										<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    											<a class="dropdown-item" href="#">Action</a>
    											<a class="dropdown-item" href="#">Another action</a>
    											<div class="dropdown-divider"></div>
    											<a class="dropdown-item" href="#">Something else here</a>
    										</ul>
    									</div>