Bootstrap 4 Dropdowns

Add dropdown menus without writing any JavaScript.

Bootstrap includes a component for adding dropdown menus. The JavaScript is included with the default Bootstrap JS file and you can use it simply by adding the CSS classes — no further JavaScript required.

Example

Here's an example of a Bootstrap 4 dropdown:

View Output

Here's a closer look at the code:

View Output

Explanation of Code

Creating the Dropdown

The dropdown is done purely with HTML markup. Bootstrap handles the JavaScript behind the scenes.

Here are the key steps for creating a Bootstrap dropdown:

  1. Wrap the dropdown trigger element within an element with Bootstrap's .dropdown class, or another element that uses position: relative;
  2. Add Bootstrap's .dropdown-toggle class and add data-toggle="dropdown" to the trigger element (i.e. the element that users click on to expand the dropdown). In the above example, the trigger is a <button> element.
  3. Wrap all dropdown items in a <div> with .dropdown-menu applied
  4. Each dropdown item uses the <a> element (but can also use the <button> element) with a class of .dropdown-item.

About the ARIA Attributes

You might also notice that the above example has some ARIA attributes. These have been added for accessibility purposes. Here's an explanation of the ARIA attributes used with the above dropdown.

aria-haspopup
Indicates that the element has a popup context menu or sub-level menu. Its value can be either true (the element has a popup) or false (the element does not have a popup).
aria-expanded
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. Possible values are true, false, and undefined (default).
aria-labelledby
Identifies the element (or elements) that labels the current element. It provides the user with a recognizable name of the object.

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 uses a different technique to build dropdowns to Bootstrap 3.

Bootstrap 3 applied dropdowns to lists (i.e. using <ul> and <li>) whereas with Bootstrap 4, you can apply a dropdown to either a <ul> element or a <div> element.

With Bootstrap 4, you apply the .dropdown-item to a <a> or <button> element and apply the .dropdown-menu class to their wrapper element.

Dropup Menu

You can reverse the dropdown so that it becomes a "dropup" menu.

To do this, use .dropup instead of .dropdown on the parent element.

View Output

Align Right

You can add Bootstrap's .dropdown-menu-right class to the .dropdown-menu class to align the menu to the right of its parent.

View Output

Menu Headers

Add a header to your dropdown menu by adding a applying Bootstrap's .dropdown-header class to a heading element (<h1> - <h6>).

View Output

Bootstrap 4 vs Bootstrap 3

Bootstrap 3 applies the .dropdown-header class to the <li> element (because it used lists to build dropdowns). Bootstrap 4 applies the class to heading elements.

Dividers

Add dividers to your dropdown menu by adding a applying Bootstrap's .dropdown-divider class to a <div> element.

View Output

Bootstrap 4 vs Bootstrap 3

Bootstrap 3 applies the .divider class to the <li> element (because it used lists to build dropdowns). Bootstrap 4 uses .dropdown-divider instead, and it is applied to a <div> element.

Disabled Menu Items

Disable a menu item by applying Bootstrap's .disabled class to its <a> tag.

View Output

Bootstrap 4 vs Bootstrap 3

Bootstrap 3 applies the .disabled class to the <li> element. Bootstrap 4 applies it to the <a> element.

Split Dropdowns

You can also create split dropdown menus with button groups.