Bootstrap 5 Dropdowns Via JavaScript Last Updated : 05 Aug, 2024 Comments Improve Suggest changes Like Article Like Report 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: HTML <!DOCTYPE html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> <title>Bootstrap 5 Dropdowns Via JavaScript</title> </head> <body> <h1 class="m-4 text-success"> GeeksforGeeks </h1> <h4 class="ms-4"> Bootstrap 5 Dropdowns Via JavaScript </h4> <div class="container mt-4"> <div class="dropdown"> <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown"> Dropdown button </button> <ul class="dropdown-menu"> <li> <p> <abbr title="Cascading Styling Sheets" class="ms-2"> CSS </abbr> </p> </li> <li> <p> <abbr title="HyperText Markup Language" class="ms-2"> HTML </abbr> </p> </li> <li> <p> <abbr title="JavaScript" class="ms-2"> JS </abbr> </p> </li> </ul> </div> </div> <script> let toggleBtn = document.getElementsByClassName('.dropdown-toggle') let dropdownEl= new bootstrap.Dropdown(toggleBtn); dropdownEl.show(); </script> </body> </html> Output:Example 2: The code below demonstrates how we can use Dropdowns via JavaScript and add Scrollspy to it: HTML <!DOCTYPE html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> <title>Bootstrap 5 Dropdowns Via JavaScript</title> </head> <body> <h1 class="m-4 text-success"> GeeksforGeeks </h1> <h4 class="ms-4"> Bootstrap 5 Dropdowns Via JavaScript </h4> <div class="container"> <nav id="navbar-example2" class="navbar navbar-light bg-light px-3 m-4"> <a class="navbar-brand" href="#"> Navbar </a> <div class="dropdown"> <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown"> Topics </button> <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2"> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading1"> DS </a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading2"> Algorithms </a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading3"> C++ </a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading4"> BootStrap 5 </a> </li> </ul> </div> </nav> <div class="container" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0"> <h4 id="scrollspyHeading1"> Data Structures </h4> <p> A data structure is a group of data elements that provides the easiest way to store and perform different actions on the data of the computer. A data structure is a particular way of organizing data in a computer so that it can be used effectively. The idea is to reduce the space and time complexities of different tasks. The choice of a good data structure makes it possible to perform a variety of critical operations effectively. An efficient data structure also uses minimum memory space and execution time to process the structure. </p> <h4 id="scrollspyHeading2"> Algorithms </h4> <p> The word Algorithm means ” A set of finite rules or instructions to be followed in calculations or other problem-solving operations ” Or ” A procedure for solving a mathematical problem in a finite number of steps that frequently involves recursive operations”.It can be understood by taking the example of cooking a new recipe. To cook a new recipe, one reads the instructions and steps and executes them one by one, in the given sequence. The result thus obtained is the new dish is cooked perfectly. Every time you use your phone, computer, laptop, or calculator you are using Algorithms. </p> <h4 id="scrollspyHeading3"> C++ </h4> <p> C++ is a general-purpose programming language and is widely used nowadays for competitive programming. It has imperative, object-oriented and generic programming features. C++ runs on lots of platforms like Windows, Linux, Unix, Mac etc.C++ is a general-purpose programming language that was developed as an enhancement of the C language to include object-oriented paradigm. It is an imperative and a compiled language.C++ is a middle-level language rendering it the advantage of programming low-level (drivers, kernels) and even higher-level applications (games, GUI, desktop apps etc.). The basic syntax and code structure of both C and C++ are the same. </p> <h4 id="scrollspyHeading4"> BootStrap 5 </h4> <p> Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to make responsive websites. Bootstrap 5 was officially released on 16 June 2020 after several months of redefining its features. Bootstrap is a framework that is suitable for mobile-friendly web development. it means the code and the template available on bootstrap are applicable to various screen sizes. It is responsive for every screen size. </p> </div> </div> <script> let toggleBtn = document.getElementsByClassName('.dropdown-toggle') let dropdownEl = new bootstrap.Dropdown(toggleBtn); dropdownEl.show(); $(function () { $('#work').on('activate.bs.scrollspy') }); </script> </body> </html> Output:Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#via-javascript Comment More infoAdvertise with us P priyanshuchatterjee01 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 5 Dropdowns Single Button Bootstrap 5 Dropdowns Single button is used to turn a button into a dropdown toggle with some basic markup. A dropdown button lets the user select from a number of items. Bootstrap 5 Dropdowns Single Button class:dropdown-toggle: This class is used to make the button drop down.Syntax:<div class=" 2 min read Bootstrap 5 Dropdowns Split Button Bootstrap 5 Dropdowns split button is used to turn a button into a dropdown toggle with some basic markup. A dropdown button lets the user select from a number of items. Bootstrap 5  Dropdowns split button class:dropdown-toggle-split: This class is used for proper spacing around the dropdown caret i 3 min read Bootstrap 5 Dropdowns Sizing Bootstrap 5 Dropdowns Sizing is used to create dropdowns on different sizes of buttons. It normally works on any size of a button, there can be a single large button or a split small button. Bootstrap 5 Dropdowns Sizing Class: There is no pre-defined class for this you can use the Bootstrap 5 Dropdo 2 min read Bootstrap 5 Dropdowns Dark dropdowns Bootstrap 5 Dropdowns Dark dropdowns are needed to match the navbar or site theme. Add .dropdown-menu-dark to an existing .dropdown-menu to enable darker dropdowns to match a dark navbar or custom style. No changes are necessary for the dropdowns. Prerequisites: Refer to buttons and dropdowns for cu 2 min read Bootstrap 5 Dropdowns Directions Bootstrap 5 Dropdowns Directions are used to change the direction in which we want the dropdown to pop up. The arrow direction is changed based on the direction set for the dropdown to appear. Bootstrap 5 Dropdowns Directions: Dropdown Dropleft: This is used to show dropdown menus left-side of the r 2 min read Bootstrap 5 Dropdowns Dropup Bootstrap 5 Dropdowns Dropup is used to show dropdown menus above the parent elements by using the .dropup class.Bootstrap 5 Dropdowns Dropup Class:dropup: To launch dropdown menus above elements.Syntax:<div class="btn-group dropup"> ...</div>Example 1: This example describes the basic u 2 min read Bootstrap 5 Dropdowns Dropright Bootstrap 5 Dropdowns Dropright is used to open the dropdown on the right-hand side of the user, We can one the dropdowns anywhere Bootstrap 5 Dropdowns Dropright Class: dropend: This class is used to launch dropdown menus to the right of the button. Syntax <div class="btn-group dropend"> < 2 min read Bootstrap 5 Dropdowns Dropleft Bootstrap 5 Dropdowns Dropleft is used to open the dropdown on the left-hand side of the user. Dropdown menus can be set up to the left of the elements by adding .dropstart to the parent element. Bootstrap 5 Dropdowns Dropleft Class: dropstart: This class is used to launch dropdown menus to the righ 2 min read Bootstrap 5 Dropdowns Menu items Bootstrap 5 Dropdowns Menu items are a list of options on a website that appears only when a user interacts with the menu, like by clicking on it or hovering over it. Bootstrap 5  Dropdowns Menu items:Bootstrap 5 Dropdowns Menu items Active: It helps to set the state of any item in the dropdown menu 2 min read Bootstrap 5 Dropdowns Active Bootstrap5 Dropdowns Active helps to set the state of any item in the dropdown menu as active. By default, the active item's background color will be set to blue and the text color will be set to white to make it different from the surrounding items. Dropdowns Active Class: active: This class is use 2 min read Like