Bootstrap Dropdown Menu ASP.NET MVC

In a Microsoft ASP.NET MVC application, I am attempting to implement a Bootstrap NavBar with a dropdown. The menu item with a dropdown does not drop down and show the submenu items. The bootstrap css and js files are referenced as well as the JQuery js file.

I was working from the Bootstrap Navbar example at https://getbootstrap.com/docs/4.2/components/navbar/

The page source is:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Home Page - Test</title>
        <script src="/Scripts/modernizr-2.8.3.js"></script>            
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="/Home/Index">App</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/Home/Index">Home</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLinkSearch" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Search</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkSearch">
                            <a class="dropdown-item" href="/Home/Search1">Search1</a>
                            <a class="dropdown-item" href="/Home/Search2">Search2</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="container body-content">
            <main>
                <section class="row" aria-labelledby="aspnetTitle">
                    <h1 id="title">Test</h1>
                </section>
            </main>
            <hr />
            <footer>
                <p>&copy; 2024</p>
            </footer>
        </div>    
        <script src="/Scripts/jquery-3.4.1.js"></script>
        <script type="text/javascript" language="javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>        
    </body>
</html>

Solution

I believe that your NavBar HTML code is from Bootstrap 4 with data-toggle and data-target. This is not applicable in Bootstrap 5.

Refer to the documentation for Migration to Bootstrap 5:

Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.

Thus, if you use Bootstrap 5, you need to migrate those attributes from data-* to data-bs-*.

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

Demo @ StackBlitz