Bootstrap 4 Components

Dropdown

A dropdown is a list of items or links that are only displayed when a button or link is clicked. The list is toggleable when the link or button is clicked.

A Simple Dropdown

A dropdown can be created using an <a> element or by using a <button> element.

To create a dropdown first wrap the dropdown button or the link inside .dropdown class, or another element that uses position: relative;. To the link or button that is acting as the toggle element add class .dropdown-toggle and attribute data-toggle=”dropdown”.

All the dropdown items goes inside a <div> with class .dropdown-menu. And each dropdown item whether it be a link or button has class .dropdown-item.

Dropdown using anchor element.

<div class="dropdown"> <a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="#">Action 1</a> <a class="dropdown-item" href="#">Action 2</a> <a class="dropdown-item" href="#">Action 3</a> </div> </div>

Dropdown using a button.

<div class="dropdown"> <button class="btn btn-secondary 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 1</a> <a class="dropdown-item" href="#">Action 2</a> <a class="dropdown-item" href="#">Action 3</a> </div> </div>

Note:you can use any variants of buttons using .btn-* classes.

Split Button Dropdowns

We can create a split button dropdown by simply adding the class .dropdown-toggle-split to the button element in a button group.

<div class=”dropdown”> <div class="btn-group"> <button type="button" class="btn btn-secondary">Action</button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-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 1</a> <a class="dropdown-item" href="#">Action 2</a> <a class="dropdown-item" href="#">Action 3</a> </div> </div> </div>

Sizing

You can have button dropdown with its default size, smaller size or larger size. For smaller or larger buttons use classes .btn-sm or .btn-lg.

For large button

<div class=”dropdown”> <div class="btn-group"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Large button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action 1</a> <a class="dropdown-item" href="#">Action 2</a> <a class="dropdown-item" href="#">Action 3</a> </div> </div> </div>

For small button

<div class=”dropdown”> <div class="btn-group"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Small button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action 1</a> <a class="dropdown-item" href="#">Action 2</a> <a class="dropdown-item" href="#">Action 3</a> </div> </div> </div>

Note: you can use different sizing in all button variants and on split button dropdowns.

Dropup

Use .dropup instead of dropdown on the parent element for the dropdown menu to appear on top of the button.

<div class="dropup"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Drop up </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action 1</a> <a class="dropdown-item" href="#">Action 2</a> <a class="dropdown-item" href="#">Action 3</a> </div> </div>

Menu Alignment

To align a dropdown menu to the right add class .dropdown-menu-right to .dropdown menu.

<div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Click to see right-aligned dropdown menu </button> <div class="dropdown-menu dropdown-menu-right"> <button class="dropdown-item" type="button">Action 1</button> <button class="dropdown-item" type="button">Action 2</button> <button class="dropdown-item" type="button">Action 3</button> </div> </div>

Menu Headers

Add headers to label sections of actions using in a dropdown menu using .dropdown-header.

<div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu"> <h6 class="dropdown-header">Select any action</h6> <button class="dropdown-item" type="button">Action 1</button> <button class="dropdown-item" type="button">Action 2</button> <button class="dropdown-item" type="button">Action 3</button> </div> </div>

Menu Dividers

Separate menu items into a different section in the same dropdown in a separate div with class .dropdown-divider within dropdown menu.

<div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu"> <button class="dropdown-item" type="button">Action 1</button> <button class="dropdown-item" type="button">Action 2</button> <button class="dropdown-item" type="button">Action 3</button> <div class="dropdown-divider"></div> <button class="dropdown-item" type="button">Action 4</button> <button class="dropdown-item" type="button">Action 5</button> <button class="dropdown-item" type="button">Action 6</button> </div> </div>

Disabled Menu Items

Add .disabled to .dropdown-item for disabling the item.

<div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu"> <button class="dropdown-item" type="button">Action 1</button> <button class="dropdown-item disabled" type="button">Action 2</button> <button class="dropdown-item" type="button">Action 3</button> </div> </div>