Bootstrap 5 TutorialLesson 20Free preview

BS5 Dropdowns

This lesson is part of Bootstrap · All levels

Summary

The dropdown displays a hidden menu that appears when the user clicks on the trigger. In Bootstrap 5, a dropdown is created with the data-bs-toggle="dropdown" attribute on the button, and the menu is written with <ul class="dropdown-menu"> containing <a class="dropdown-item">. This component requires a JavaScript bootstrap bundle.

Key points

The trigger uses the data-bs-toggle="dropdown" and is either <button> or <a>.
The menu uses ul.dropdown-menu with a.dropdown-item in it.
The open trigger gains the class .show.
The menu position is set by .dropend, .dropstart, .dropup.
Popper.js that is already included in the bundle keeps the menu fixed in the viewport.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.