Bootstrap 5 Dropdown Menus: Click-Expanded Navigation Option Lists

The Bootstrap 5 dropdown menu solves the space - occupying problem caused by a large number of menu items by collapsing to save space while keeping the interface concise. Before use, you need to introduce Bootstrap 5 CSS, Popper.js and Bootstrap JS in the correct order (the order cannot be wrong). The core structure consists of an outer `<div class="dropdown">` container. Inside it, there is a trigger button (`class="btn dropdown - toggle"` with the `data - bs - toggle="dropdown"` attribute) and an option list (`class="dropdown - menu"`). The option list is wrapped with `<li>`, and the menu items are `dropdown - item`, which supports `active` (highlighted), `disabled` (disabled) and divider lines (`dropdown - divider`). The interaction logic is built - in: clicking the trigger button expands or collapses the list, and clicking the menu item automatically closes the list without additional JS. Advanced usage supports right - alignment (`dropdown - menu - end`) and upward expansion (the `dropup` class). When using, you need to ensure that the dependencies are correctly introduced and the structure is correct (such as menu items inside `<li>`), and you can quickly implement a concise navigation menu.