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 

• Link 1
• Link 2
• 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

 English example text

• Link 1
• Link 2
• Link 3

Split Dropdown Menu

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

• ---

For example:

 Bootstrap Example 

Split Dropdown Menu

 English example text

• Link 1
• Link 2
• Link 3

• ---

• Other link

Dropdown Menu Header

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

• Dropdown Header 1

For example:

 Bootstrap Example 

Dropdown Menu

 English example text

• Dropdown Heading 1

• Link 1
• Link 2
• Link 3

• Dropdown Heading 2

• 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):

• Normal
• Active
• Disabled

For example:

 Bootstrap Example 

The Dropdown Menu Has Disabled Items Highlighted in Light Gray

 English example text

• Normal
• Work
• 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 

• Normal
• Active
• Disabled

Dropstart menu:

 Bootstrap Example 

Dropstart Menu

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

• Normal
• Active
• 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

 English example text

• Link Tipsmake 1
• Link Tipsmake 2
• Link Tipsmake 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

• Link 1
• Link 2
• 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:

• Link 1
• Link 2
• Link 3
• Text Link
• Just Text

• Link 1
• Link 2
• Link 3
• Text Link
• Just Text

For example:

 Bootstrap Example 

The Dropdown Menu Contains Text or a Link

 English example text

• Link QTM 1
• Link QTM 2
• Link QTM 3
• TipsMake.com
• Just Text

Group Buttons with Dropdown Menus

The basic code is as follows:

 Apple Samsung Sony

• Tablet
• Smartphone

For example:

 Bootstrap Example 

Nested Button Groups to Create a Dropdown Menu

 Tipsmake.com Tipsmake.com TipsMake

• Tablet
• Smartphone

Vertical Button Layout with Dropdown Menu

Basic code:

 Apple Samsung Sony

• Tablet
• Smartphone

For example:

 Bootstrap Example 

Group the Buttons Vertically with the Dropdown Menu

 TipsMake Downloadvn VnDoc

• Tablet
• 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!

FAQ

What is the main point of 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.

Why is this development important?

Key takeaway: Dropdown menus in Bootstrap 5 are a cool feature you shouldn't miss.

What are the key takeaways?

Dropdown menus in Bootstrap 5 are a cool feature you shouldn't miss.