Bootstrap 4 Dropdowns

• Bootstrap Images
• Bootstrap Button Groups

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:

Here's a closer look at the code:

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.

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.

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.

Menu Headers

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

Dividers

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

Disabled Menu Items

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

Split Dropdowns

You can also create split dropdown menus with button groups.

• Bootstrap Images
• Bootstrap Button Groups