sub menu items not displaying in the mobile view of an ASP dot NET MVC 6 application Edit

There are two problems I was trying to solve. In Bootstrap version 4.6.2 I am able to get the menu working on web application But I am unable to get the menu & sub menu or the second level menu working on mobile application. In bootstrap version 5.3.2 I am able to get the first level menu working on mobile and web but the sub menu or second level menu does not work. Here's the working solution.

Solution

I found everything to be working in bootstrap version 5.1.3. add

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">




    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

data-toggle="dropdown" attribute in Bootstrap 4 was changed to data-bs-toggle="dropdown" in bootstrap 5. This is a common issue when upgrading from Bootstrap 4 to Bootstrap 5,

Here is a sample code

                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                                Open PO
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" asp-area="" asp-controller="OpenPO" asp-action="Index">Open PO</a>
                                <a class="dropdown-item" asp-area="" asp-controller="Received" asp-action="Index">Received</a>
                                <a class="dropdown-item" asp-area="" asp-controller="ReceivedException" asp-action="Index">Received Exception</a>
                            </div>
                        </li>
					</ul>
				</div>