dropdown menu item doesn't drop down

Question

I have an ASP.NET Core MVC web application. In _layout.cshtml, I have the following code, but it doesn't drop down in the menu bar it shows "manage" with a down arrow next to it below is the full _layout code I saw the part about bootstrap. I'm trying to get back into coding non of this existed in the late 90's in the dropdown I want to edit or delete users and roles

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - PSRIntranet</title>
    <script type="importmap"></script>
    <link rel="stylesheet" href="~/css/bootswatch.scss" />
    <link rel="stylesheet" href="~/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/PSRIntranet.styles.css" asp-append-version="true" />
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">PSRIntranet</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <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 text-dark" asp-area="" asp-controller="Home" asp-action="QuickTrack">Quick Tracking</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="BusinessContacts" asp-action="List">BusinessContacts</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Purchasing">Purchasing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Calander">Calander</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Training">Training</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Manage
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" asp-controller="Administration"
                                   asp-action="ListUsers">Users</a>
                                <a class="dropdown-item" asp-controller="Administration"
                                   asp-action="ListRoles">Roles</a>
                            </div>
                        </li>
                        <li class="nav-item">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                    <partial name="_LoginPartial" />
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2025 - PSRIntranet - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jquery/dist/custom.min.js"></script>
    <script src="~/js/prism.js"></script>
    <script src="~/js/index.global.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

When you click the "Manage" link, it doesn't open the dropdown? — Jerdine Sabio
– Jerdine Sabio, Commented Jul 20 at 2:04

Yong Shun · Accepted Answer · 2025-07-20 02:09:39Z

0

As you are using Bootstrap 5 (which you tag the question with bootstrap-5, you should data-bs-toggle attribute instead of data-toggle.

<a
  class="nav-link dropdown-toggle"
  href="#"
  id="navbarDropdownMenuLink"
  data-bs-toggle="dropdown"
  aria-haspopup="true"
  aria-expanded="false"
>
  Manage
</a>

Demo @ StackBlitz

Note that if you are migrating to Bootstrap 5 from older version, this is the reference material regarding the breaking changes:

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.

answered Jul 20 at 2:09

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jerdine Sabio · Accepted Answer · 2025-07-20 02:18:04Z

First you want to identify which bootstrap version you are using
Open wwwroot / lib / bootstrap / dist / css / bootstrap.css
Once you've identified the version, you'd search the bootstrap documentation for the navbar menu.
https://getbootstrap.com/docs/5.3/components/navbar/
I would change the version at the top right to the version you are using. In my case it's 5.1.

Then just copy and paste the dropdown code from that specific version.
For 5.1 it's;

<li class="nav-item dropdown">
   <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
   <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
   </ul>
</li>

Result;

Radioactive · Accepted Answer · 2025-08-03 11:55:04Z

0

Thank you guys.

I'm using boot strap 5.3.7.

I just replaced the href with the asp-controller and asp-action now just a few more items on my list in this multi crud application and I can deploy it.

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Administration</a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li>
            <a class="ListUsers" asp-controller="Administration" asp-action="ListUsers">Manage Users</a>
        </li>
       <li>
            <a class="List Roles" asp-controller="Administration" asp-action="ListRoles">Manage Roles</a>
        </li>
    </ul>
</li>

edited Aug 3 at 11:55

Radioactive

9351 gold badge8 silver badges21 bronze badges

answered Aug 3 at 10:46

John Finch

13 bronze badges

Collectives™ on Stack Overflow

dropdown menu item doesn't drop down

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related