> For the complete documentation index, see [llms.txt](https://bootstrapbay.gitbook.io/grace-ui-kit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bootstrapbay.gitbook.io/grace-ui-kit/components/dropdown.md).

# Dropdown

### Overview

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is [an intentional design decision.](http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/)

Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use `bootstrap.bundle.min.js`/ `bootstrap.bundle.js` which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.

### Example

You need to 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.

Below is an example of a dropdown with the Grace styling. You will need to add the `.dropdown-border` class in order to overwrite the default Bootstrap styling.

![](https://1052164137-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LG0REpuu2Ew27TzR1Mm%2F-LG5UnkOVJ0-wE2qYmnO%2F-LG5VxPdpbxIbrGV-rEY%2FScreen%20Shot%202018-06-28%20at%2016.09.49.png?alt=media\&token=8b954d5c-4e72-439f-8e28-6b3d6d772a5a)

```markup
<label>Dropdown</label>
<div class="dropdown dropdown-border">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton" data-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>
```

If you want to see more examples and properties please check the official [Bootstrap Documentation](http://getbootstrap.com/docs/4.0/components/dropdowns/).