Lesson 18: Creating a Dropdown Menu in Bootstrap 5

Dropdown menus in Bootstrap 5 are a cool feature you shouldn't miss. Here's how to use dropdown menus in Bootstrap 5 .

 

Create a basic dropdown menu.

A dropdown menu is a toggleable menu that allows the user to select a value from a predefined list. Essentially, it would look like this:

  Dropdown button 

1. Link 1
2. Link 2
3. Link 3

 

Detailed explanation:

This class .dropdownrepresents a dropdown menu.

To open this menu, use a button or link containing the class .dropdown-toggleand attribute data-bs-toggle="dropdown".

Add a class .dropdown-menuto the element to create a real dropdown menu. Then add the class .dropdown-itemto each element (link or button) inside the dropdown menu.

For example:

 Bootstrap Example 

Dropdown menu

  Nút bấm menu thả xuống 

1. Link 1
2. Link 2
3. Link 3

 

Split dropdown menu

The `.dropdown-divider` class is used to separate the links within a dropdown menu with a thin horizontal border:

1. ---

For example:

 Bootstrap Example 

Split dropdown menu

  Nút bấm thả xuống 

1. Link 1
2. Link 2
3. Link 3

4. ---

5. Other link

 

Dropdown menu header

This class .dropdown-headeris used to add headers inside the dropdown menu:

1. Dropdown header 1

For example:

 Bootstrap Example 

Dropdown menu

  Nút bấm thả xuống 

1. Dropdown heading 1

2. Link 1
3. Link 2
4. Link 3

5. Dropdown heading 2

6. Other link

 

Disabled and enabled items

Highlight a specific dropdown item using a class .active(add a blue background color).

To disable an item in a dropdown menu, use the class .disabled(which has light gray text and no mouse cursor effect):

1. Normal
2. Active
3. Disabled

For example:

 Bootstrap Example 

The dropdown menu has disabled items highlighted in light gray.

  Nút bấm thả xuống 

1. Normal
2. Work
3. Disabled

 

Drop-off location

You can also create a "dropend" (drop-down on the right) or "dropstart" (drop-down on the left) menu by adding the class .dropend or .dropstart to the dropdown element. Note that the caret/arrow is added automatically.

Drop it to the right:

Drop it to the left:

For example:

Menu dropend:

 Bootstrap Example 

Menu drop-down menu

Add .dropend next to the dropdown menu to right-align it. Carets and arrows are added automatically;

  Dropend 

1. Normal
2. Active
3. Disabled

Dropstart menu:

 Bootstrap Example 

Dropstart menu

Add .dropstart next to the dropdown menu to align it to the left.Dropstart

1. Normal
2. Active
3. Disabled

 

To the right of the dropdown menu

To align the dropdown menu to the right, add the .dropdown-menu-endfollowing class to this element .dropdown-menu:

For example:

 Bootstrap Example 

The dropdown menu is on the right.

  Nút bấm thả xuống 

1. Link QuanTriMang 1
2. Link QuanTriMang 2
3. Link QuanTriMang 3

Dropup

If you want the dropdown menu to expand upwards instead of dropping down, change the element with class='dropdown' to 'dropup' : :

For example:

 Bootstrap Example 

Dropdown menu

The `.dropup` class makes the dropdown menu expand upwards instead of downwards:

Note that there must be space for the expandable dropup menu.Dropup button

1. Link 1
2. Link 2
3. Link 3

Text dropdown

The class .dropdown-item-textis used to add plain text to a dropdown menu or to use links for the default link style:

1. Link 1
2. Link 2
3. Link 3
4. Text Link
5. Just Text

1. Link 1
2. Link 2
3. Link 3
4. Text Link
5. Just Text

For example:

 Bootstrap Example 

The dropdown menu contains text or a link.

  Nút bấm thả xuống 

1. Link QTM 1
2. Link QTM 2
3. Link QTM 3
4. TipsMake.com
5. Just Text

Group buttons with dropdown menus

The basic code is as follows:

 Apple Samsung Sony

1. Tablet
2. Smartphone

For example:

 Bootstrap Example 

Nested button groups to create a dropdown menu.

 Download.vn Download.com.vn TipsMake

1. Tablet
2. Smartphone

Vertical button layout with dropdown menu

Basic code:

 Apple Samsung Sony

1. Tablet
2. Smartphone

For example:

 Bootstrap Example 

Group the buttons vertically with the dropdown menu.

 TipsMake Downloadvn VnDoc

1. Tablet
2. Smartphone

Above is how to create a dropdown menu using Bootstrap 5. As you can see, it's not too difficult if you take the time to learn a little. Good luck!

You've just finished reading the article "Lesson 18: Creating a Dropdown Menu in Bootstrap 5" edited by the TipsMake team. You can save lesson-18-creating-a-dropdown-menu-uylsy.pdf to your computer here to read later or print it out. We hope this article has provided you with many useful tech tips and tricks. You can search for similar articles on tips and guides. Thank you for reading and for following us regularly.