Bootstrap 5 Dropdowns Via JavaScript

Bootstrap 5 Dropdowns can be triggered in two ways: via data attributes and JavaScript. When using JavaScript, you need to define a function that utilizes the predefined toggle() or show() method to control the dropdown from a button or link. Additionally, even with JavaScript, you must include the data-bs-toggle="dropdown" attribute to ensure the dropdown functions correctly.

Bootstrap 5 Dropdowns Via JavaScript Syntax:

dropdown.show()

Bootstrap 5 Dropdowns Via JavaScript Used methods:

• show(): This method is called to make a dropdown to expand on the page.
• toggle(): The main function of this method is to toggle the dropdown element to expand and close which is initialized.

Example 1: The code below demonstrates how we can use a simple dropdown via JavaScript:

Output:

Example  2: The code below demonstrates how we can use Dropdowns via JavaScript and add Scrollspy to it:

Output:

Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#via-javascript