12 Examples to Learn Using Bootstrap 5 Dropdown

What is dropdown in Bootstrap 5?

• Dropdowns are used to display links or other information as the mouse is clicked on an element like a button, link etc.
• These are contextual overlays or menus that you use in the navbar, tabs, pill nav etc.
• An important point to notice in BS 5 is, the toggleable dropdown is opened/closed by clicking and not by hovering the mouse over the button or link, etc. where the dropdown is created. This behavior is designed intentionally in BS5. You may learn about this decision here in detail.

How dropdown is created in BS5?

• Popper is a third-party library that you need to include before the Bootstrap JS library.
• As such dropdowns are built on popper.
• FYI, the purpose of the popper is to detect viewport and dynamic positioning.
• You need to use .dropdown-toggle class and data-bs-toggle = “dropdown” property in a button, link etc. to create a dropdown (please see examples below)

Quick Demos Online:

• Basic Dropdown
• Various colores
• Split button dropdown
• Sizes, upward direction,
• Dividers in the dropdown,
• Text content in a dropdown
• Dropdown in navbar

A basic example of Bootstrap 5 dropdown with a button

Let us start with a basic example of creating a dropdown by using a button. As you click on the button, the dropdown menu opens with a few links.

See online demo and code

An example of various colored button dropdowns

In this example, we have created different color dropdown buttons by using the available contextual color classes in BS 5.

See online demo and code

Creating a button dropdown with split button example

For creating a dropdown with split button, you need to use markup for two buttons.

• Outer div refers to the btn-group
• For the first button, you provide the text to be displayed for the button.
• In the second button, use the dropdown-toggle-split class for splitting this button that is adjacent to the first button.

See the complete code below where we created green-colored buttons.

See online demo and code

You may specify different colors for both buttons to make the split distinct. See the example and code below:

See online demo and code

The code:

Large and small size dropdowns example

The above demos show normal sized dropdown. You may create large or small sized dropdowns for simple or split styles as well.

For that, simply use the .btn-sm for small and .btn-lg classes for large buttons. See an example below where we created all three sizes:

See online demo and code

Creating a dropdown in upward direction example

In all the above examples, the dropdown menu opened downwards. You may also make a dropdown menu trigger upwards or other directions by using specific classes. For making the menu open above elements, use the .dropup class.

We just added the dropup class along with btn-group class, as shown in the example below:

See online demo and code

You can see, all three size buttons open the menu up direction.

Dropdown menu towards right direction example

Similarly, you may use the .dropend class to open the menu towards the right of the element. Have a look at the code below:

See online demo and code

Dropdown towards left direction example

Use the .dropstart class for opening the menu towards the left side of the button or other elements with a dropdown. Have a look:

See online demo and code

Adding dividers in the dropdown example

To differentiate the menu items in the dropdown, you may use the .dropdown-divider in the <li>. See an example with the code below:

See online demo and code

Placing text content in a dropdown example

Not only you may place links in the dropdowns but other content like text without links can also be placed. See an example below:

See online demo and code

An example of a dropdown with anchor text

As mentioned earlier, you may use different elements like buttons, links, dropdowns in the navbar etc.

The following example shows creating a dropdown using anchor text by using <a> tag:

See online demo and code

Dropdown in navbar example

The following example shows using a dropdown in the navbar. For that, we have different menus, and the dropdown menu is created twice in the example.

See online demo and code

 

For the full documentation, please refer to https://getbootstrap.com/docs/5.0/components/dropdowns/