The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →For a new project, use Bootstrap 5.3’s dropdown plugin: add a trigger with data-bs-toggle="dropdown", place a .dropdown-menu beside it inside a dropdown container, and load Bootstrap’s JavaScript. The example below creates a click-to-open menu with two navigation links. It assumes Bootstrap 5; Bootstrap 4 uses different data attributes, so don’t mix its code with this example.
Bootstrap 5 dropdown menu example
Add Bootstrap 5.3’s stylesheet in your page’s <head>, then use this markup where the menu should appear:
As an Amazon Associate I earn from qualifying purchases.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">
Menu
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/first">First action</a></li>
<li><a class="dropdown-item" href="/second">Second action</a></li>
</ul>
</div>Replace /first and /second with real destinations. The complete markup and supported variations are documented in the Bootstrap 5.3 dropdown documentation.
Recommended Free Tools
Load the JavaScript that opens the menu
The dropdown is not just styled markup: Bootstrap’s JavaScript plugin handles opening, closing, and menu behavior. Include the Bootstrap 5.3 bundled JavaScript, which contains Popper, or include the separate Popper script before Bootstrap’s JavaScript. Without the plugin, the trigger will not toggle the menu.
#1 Best Overall
Popper positions dynamically placed dropdowns; Bootstrap does not use Popper for dropdown positioning inside navbars. Follow the Bootstrap 5.3 setup documentation for the framework’s CSS and script setup. If you load scripts individually, preserve the required order: Popper first, then Bootstrap.
What each part of the markup does
.dropdowngroups the trigger and menu. A positioned parent can also be used when the layout requires it.data-bs-toggle="dropdown"tells Bootstrap to treat the button as a dropdown trigger..dropdown-toggleapplies the familiar toggle styling, including its indicator.aria-expanded="false"starts the trigger in the collapsed state; the plugin updates its expanded state as the menu opens or closes..dropdown-menumarks the menu container. Each link styled with.dropdown-itemis a selectable item.
Choose links, buttons, or other menu content
Use links when selecting an item navigates to another page or location. Use buttons when the item performs an action on the current page. Bootstrap supports both in dropdowns, and menus can also contain text or form controls. Choose elements for their actual purpose rather than styling every item as a link.
A generic Bootstrap dropdown is not automatically an ARIA menu widget. Don’t add role="menu" or related roles simply because the component is called a menu; choose accessible semantics that match the content and interaction. Bootstrap documents keyboard support including moving among dropdown items with cursor keys and closing with Escape.
Align or reposition the dropdown
The default menu opens below its trigger and aligns to the start. To align it to the end, add .dropdown-menu-end to the menu:
<ul class="dropdown-menu dropdown-menu-end">Bootstrap also provides direction classes for menus that should open above or to the side of the trigger. For responsive alignment, use breakpoint-specific alignment classes with data-bs-display="static"; static display lets the responsive CSS alignment take effect rather than relying on Popper’s dynamic positioning.
Use dark styling in Bootstrap 5.3
In Bootstrap 5.3, .dropdown-menu-dark is deprecated. Use the color-mode attribute instead. Add data-bs-theme="dark" to the dropdown, a containing parent, or the page root to apply dark styling at the scope you need. This follows Bootstrap’s current dropdown color-mode guidance.
Rank #4
Bootstrap 4 code and Bootstrap 5 code are not interchangeable
This example targets Bootstrap 5.3. Bootstrap 5 uses the data-bs- attribute prefix, including data-bs-toggle; older Bootstrap examples may use different attribute names and setup patterns. Check the documentation for the version installed in your project before copying older snippets or combining markup and scripts from different major versions. Bootstrap’s Bootstrap 5.0 dropdown documentation is available for version-specific reference.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
