Bootstrap 5 Dropdown  Menu

Bootstrap 5 Dropdown

Bootstrap 5 dropdown menu is used to display the predefined links in a list format and it allows the user to select one value from the predefined list.

Steps to create dropdown:

  • Assign .dropdown to the dropdown container.
  • Place <button> inside dropdown container and assign .dropdown-toggle, data attribute data-bs-toggle="dropdown" to the <button>.
  • Place unordered list inside dropdown container and assign .dropdown-menu class.
  • Add .dropdown-item to the unordered list item <li> base class.

Note: Follow the above mention steps to create a bootstrap 5 dropdown menu component.

Bootstrap 5 Basic Dropdown Menu

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Code Explanation

Please keep in mind that , assign .dropdown-menu class to the dropdown container and assign .dropdown-item class to every dropdown item base class.

Dropdown Menu Using Hyperlink

Steps to create dropdown menu using hyperlink:

  • Assign .dropdown to the dropdown container.
  • Place <a> inside dropdown container and assign .dropdown-toggle, data attribute data-bs-toggle="dropdown" to the <button>
  • Place unordered list inside dropdown container and assign .dropdown-menu
  • Add .dropdown-item to the unordered list item <li>

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Code Explanation

Note: Please keep in mind that assign .dropdown-menu to the dropdown item container element base class and assign .dropdown-itemto every dropdown child item base class.

Dropdown:Item Active & Disabled

To make dropdown item active and disabled,use .active and .disbaled to the dropdown list item <a> base class.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Code Explanation

To make dropdown item active and disabled assign .active & .disabled class to the dropdown child element base class correspondingly.

Dropdown Size:Small & Large

To make large dropdown button size add .btn-lg & .dropdown-toggle-split to the <button> having .dropdown-toggle while as to make small <button> add .btn-sm & .dropdown-toggle-split to the <button> having .dropdown-toggle

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Code Explanation

Note: To make a large button assign .btn-lg class to the <button> element base class while to make small button assign .btn-sm class to the <button > element base class.

Dark dropdowns

To make dark dropdown,add .dropdown-menu-dark to the dropdown item container having .dropdown-menu.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Code Explanation

Note: Please keep in mind that , you have to assign .dropdown-menu-dark class to the element having .dropdown-menu class.

Navbar With Dropdown

Use navbar and dropdown concept both to make navbar with dropdown feature.

Source Code

Try it now

Source Code : Output

Code Explanation

Note: To make dropdown menu inside navbar, use dropdown and navbar concept.

Bootstrap 5 Dropdown: Divider

The .dropdown-divider is used inside dropdown menu list to separate the dropdown item with a horizontal border.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Code Explanation

Note:To create dropdown divider inside dropdown menu, assign .dropdown-divider class to the <div> element base class.

Online Test / Quiz