# Dropdowns

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

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. Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection.

Find more facts and uses at the bootstrap official documentation.

## Kitchen Sink example

A composition of all working elements

## Links & buttons

Dropdown menus can be triggered from `<a>` or `<button>` elements to better fit your potential needs.

##### Button

##### Link

Dropdown link

## Dropdown buttons

##### Variations

##### Split button

## Multilevel dropdown

Add multilevel menu by wrapping the child node selectors with `.dropdown-multilevel`, change direction of by adding `.dropdown-multilevel-left` (right by default)

## Content types

## Sizing dropdowns

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

## No arrow

Remove directional arrow from dropdown button by adding `.no-arrow` to `.dropdown-toggle`

## Animated dropdowns

Add animations to dropdowns by adding `.dropdown-menu-animated`, `.fadeup`, `.fadedown`, `.faderight`, `.fadeleft` to `.dropdown-menu`

## Directional Arrows

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

##### Dropup

##### Dropend

##### Dropstart

## Container examples

You can add any content to dropdown containers and change its width by adding the class `.dropdown-sm`, `.dropdown-md`, `.dropdown-lg`, and `.dropdown-xl`

## Headers examples

Customize `.dropdown-header` using utility classes. Change backgrounds, colors, and paddings using various helpers

## Responsive alignment

If you want to use responsive alignment, disable dynamic positioning by adding the `data-display="static"` attribute and use the responsive variation classes. To align left/right the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl}-right` or `.dropdown-menu{-sm|-md|-lg|-xl}-left`

##### Left-aligned but right aligned when large screen

##### Right-aligned but left aligned when large screen

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode