Adding a Dropdown menu to the NavBar in an ASP.Net Core Web App (bootstrap)

Question

In Visual Studio, I create a new ASP.Net Core Web App

then I add a dropdown menu (as per Bootstrap documentation) https://getbootstrap.com/docs/5.1/components/navbar/

the header porton of the html code looks like this:

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-page="/Index">WebApplication1</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 flex-sm-row-reverse">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                    <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>
                </ul>
            </div>
        </div>
    </nav>
</header>

but the dropdown doesn't work. When I click it, no dropdown appears: https://i.sstatic.net/szrE4.png

hamza786 · Accepted Answer · 2022-12-03 15:28:51Z

7

In Bootstrap 5.1, for dropdown,

✅ data-bs-toggle="dropdown"

❌data-toggle="dropdown"

In Bootstrap 4.0, for dropdown,

✅ data-toggle="dropdown"

❌data-bs-toggle="dropdown"

edited Dec 3, 2022 at 15:28

answered Dec 3, 2022 at 15:27

hamza786

712 silver badges2 bronze badges

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

2 Comments

Harrison Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Paul Devenney Over a year ago

This was it for me. The code example I'd copied from probably used Boostrap 4.0. A real shame the template doesn't come setup with a working example

Rena · Accepted Answer · 2021-10-01 00:58:37Z

3

Be sure your Bootstrap version is v5.1, you can add the following css and js file to your project _Layout.cshtml:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js" integrity="sha512-ewfXo9Gq53e1q1+WDTjaHAGZ8UvCWq0eXONhwDuIoaH8xz2r96uoAYaQCm1oQhnBfRXrvJztNXFsTloJfgbL5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

For Bootstrap v4.x, you need change your code to:

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

edited Oct 1, 2021 at 0:58

answered Oct 1, 2021 at 0:53

Rena

37.2k7 gold badges50 silver badges93 bronze badges

1 Comment

Daniel Barnes Over a year ago

Rena, your v4.x answer worked perfectly. I am using Visual Studio 2019, and its default DotNet Core app appears to use v4.3.1: (as per bootstrap.js) Bootstrap v4.3.1

Collectives™ on Stack Overflow

Adding a Dropdown menu to the NavBar in an ASP.Net Core Web App (bootstrap)

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related