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">
© 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>
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>
Note that if you are migrating to Bootstrap 5 from older version, this is the reference material regarding the breaking changes:
Yong ShunYong ShunData 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-toggleinstead ofdata-toggle.
53.6k66 gold badges3737 silver badges6565 bronze badges
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>
6,00522 gold badges1414 silver badges2727 bronze badges
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>
90311 gold badge88 silver badges2121 bronze badges
Start asking to get answers
Find the answer to your question by asking.
Ask questionExplore related questions
See similar questions with these tags.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4