@@include("../partials/head.html")
@@include("../partials/doc-navbar.html")
@@include("../partials/doc-sidenav.html")

# Dropdowns

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

## Basic

     <!--
    													collapse -->
    												<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>

## Options

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

### Color

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

    <!--
    													Primary Dropdown -->
    												<div class="btn-group">
    												<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</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>

    												<!-- Secondary Dropdown -->
    												<div class="btn-group">
    												<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</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>

    												<!-- Success Dropdown -->
    												<div class="btn-group">
    												<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</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>

    												<!-- Info Dropdown -->
    												<div class="btn-group">
    												<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</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>

    												<!-- Warning Dropdown -->
    												<div class="btn-group">
    												<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</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>

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

## Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

     <!-- Large
    													button groups (default and split) -->
    												<div class="btn-group">
    												<button class="btn
    														btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    												Large button
    												</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>
    												<div class="btn-group">
    												<button class="btn
    														btn-secondary btn-lg" type="button">
    												Large split button
    												</button>
    												<button type="button" class="btn btn-lg btn-secondary 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>

    												<!-- Small button groups (default and split) -->
    												<div class="btn-group">
    												<button class="btn
    														btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    												Small button
    												</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>
    												<div class="btn-group">
    												<button class="btn
    														btn-secondary btn-sm" type="button">
    												Small split button
    												</button>
    												<button type="button" class="btn btn-sm btn-secondary 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>

## Directions

Trigger dropdown menus above elements by adding `.dropup`,`.dropleft`,`.dropright` to the parent element.

     <!--
    													Default dropup button -->
    												<div class="btn-group
    														dropup">
    												<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    												Dropup
    												</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 dropup button -->
    												<div class="btn-group
    														dropup">
    												<button type="button" class="btn btn-secondary">
    												Split dropup
    												</button>
    												<button type="button" class="btn btn-secondary 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>

    												<!-- Default dropright button -->
    												<div class="btn-group
    														dropright">
    												<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    												Dropright
    												</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 dropright button -->
    												<div class="btn-group
    														dropright">
    												<button type="button" class="btn btn-secondary">
    												Split dropright
    												</button>
    												<button type="button" class="btn btn-secondary dropdown-toggle
    														dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    												<span class="sr-only">Toggle Dropright</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>

    												<!-- Default dropleft button -->
    												<div class="btn-group
    														dropleft">
    												<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    												Dropleft
    												</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 dropleft button -->
    												<div class="btn-group">
    												<div class="btn-group
    														dropleft" role="group">
    												<button type="button" class="btn btn-secondary dropdown-toggle
    														dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    												<span class="sr-only">Toggle Dropleft</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>
    												<button type="button" class="btn btn-secondary">
    												Split dropleft
    												</button>
    												</div>

## Menu Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.

### Responsive Menu Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.

## Menu content

### Header

Add a header to label sections of actions in any dropdown menu.

     <!--
    													Header -->
    												<div class="dropdown-menu">
    												<h6 class="dropdown-header">Dropdown header</h6>
    												<a class="dropdown-item" href="#">Action</a>
    												<a class="dropdown-item" href="#">Another action</a>
    												</div>

### Dividers

Separate groups of related menu items with a divider.

     <!--
    													Divider -->
    												<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>

### Text

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

     <!-- With
    													Text -->
    												<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
    												<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>

### Forms

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

     <!-- Forms
    													-->
    												<div class="dropdown-menu">
    												<form class="px-4 py-3">
    												<div class="mb-3">
    												<label for="exampleDropdownFormEmail1">Email address</label>
    												<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
    												</div>
    												<div class="mb-3">
    												<label for="exampleDropdownFormPassword1">Password</label>
    												<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    												</div>
    												<div class="mb-3">
    												<div class="form-check">
    												<input type="checkbox" class="form-check-input" id="dropdownCheck">
    												<label class="form-check-label" for="dropdownCheck">
    												Remember me
    												</label>
    												</div>
    												</div>
    												<button type="submit" class="btn btn-primary">Sign in</button>
    												</form>
    												<div class="dropdown-divider"></div>
    												<a class="dropdown-item" href="#">New around here? Sign up</a>
    												<a class="dropdown-item" href="#">Forgot password?</a>
    												</div>

Email address
Password
Remember me

     <!-- Form
    													-->
    												<form class="dropdown-menu
    														p-4">
    												<div class="mb-3">
    												<label for="exampleDropdownFormEmail2">Email address</label>
    												<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
    												</div>
    												<div class="mb-3">
    												<label for="exampleDropdownFormPassword2">Password</label>
    												<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    												</div>
    												<div class="form-check">
    												<input type="checkbox" class="form-check-input" id="dropdownCheck2">
    												<label class="form-check-label" for="dropdownCheck2">
    												Remember me
    												</label>
    												</div>
    												<button type="submit" class="btn btn-primary">Sign in</button>
    												</form>

## Dropdown Option

Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdown.

     <!--
    													Dropdown options -->
    												<div class="d-flex">
    												<div class="dropdown me-1">
    												<button type="button"
    													class="btn
    														btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown"
    													aria-expanded="false"
    													data-bs-offset="10,20">
    												Offset
    												</button>
    												<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
    												<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="btn-group">
    												<button type="button"
    													class="btn
    														btn-secondary">Reference</button>
    												<button type="button"
    													class="btn
    														btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown"
    													aria-expanded="false"
    													data-bs-reference="parent">
    												<span class="sr-only">Toggle Dropdown</span>
    												</button>
    												<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
    												<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>

### Auto close behavior

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown.

     <!-- Auto
    													close behavior -->
    												<div class="btn-group">
    												<button class="btn
    														btn-secondary dropdown-toggle" type="button"
    													id="defaultDropdown" data-bs-toggle="dropdown"
    													data-bs-auto-close="true"
    													aria-expanded="false">
    												Default dropdown
    												</button>
    												<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    												<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">
    												<button class="btn
    														btn-secondary dropdown-toggle" type="button"
    													id="dropdownMenuClickableOutside" data-bs-toggle="dropdown"
    													data-bs-auto-close="inside"
    													aria-expanded="false">
    												Clickable outside
    												</button>
    												<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    												<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">
    												<button class="btn
    														btn-secondary dropdown-toggle" type="button"
    													id="dropdownMenuClickableInside" data-bs-toggle="dropdown"
    													data-bs-auto-close="outside"
    													aria-expanded="false">
    												Clickable inside
    												</button>
    												<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    												<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">
    												<button class="btn
    														btn-secondary dropdown-toggle" type="button"
    													id="dropdownMenuClickable" data-bs-toggle="dropdown"
    													data-bs-auto-close="false"
    													aria-expanded="false">
    												Manual close
    												</button>
    												<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    												<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>

@@include("../partials/buy-template.html") @@include("../partials/scripts.html")