Bootstrap 5 Dropdowns Via JavaScript

Last Updated : 05 Aug, 2024

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

Bootstrap 5 Dropdowns Methods

priyanshuchatterjee01

Improve

Article Tags :

Bootstrap 5 Dropdowns Via JavaScript

Similar Reads

Thank You!

What kind of Experience do you want to share?