@@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/scripts.html")