Navbar dropdown (collapse) is not working in Bootstrap 5

user_14835232 0
Viewed 38028

I am facing a issue when trying to create a responsive menu or dropdown button with Bootstrap 5.Everything seems ok.The navigation icon & dropdown icon apears.But its not working.When I clicked the nav icon or dropdown button,no dropdown menu apears.

I want to specially mention that I also included the jquery file. But it didn't work. Can anyone please tell me what is happening here?

One last thing,I faced severel issues with some others bootstrap classes like mr-auto,ml-auto etc.Is it any bug or new classes come with bootstrap 5 for this kind of job?

Here is my code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <nav class="navbar navbar-dark bg-dark navbar-expand-md">
            <a href="#" class="navbar-brand">DemoTech</a>
            <button
                class="navbar-toggler"
                data-toggle="collapse"
                data-target="#navbar"
            >
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="navbar-collapse collapse" id="navbar" navbar>
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
                </ul>
            </div>
        </nav>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

bootstrap-5 twitter-bootstrap css html javascript
9 Answers

The data-* attributes used in Bootstrap 4 have been replaced with data-bs-* in Bootstrap 5

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
    <span class="navbar-toggler-icon"></span>
</button>

Demo

As explained in the docs, data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. This mean any javascript components (Collapse, Navbar, Carousel, Dropdown, Tabs, Modal, etc..) will only work using data-bs-... attributes.

Bootstrap 5 is a major update with breaking changes. Also see here that ml-auto/mr-auto have changed to ms-auto/me-auto.

user_1714560

Make sure you have added jsDeliver CDN link from bootstrap homepage for Javascript and CSS both in the head tag.

**<!-- CSS only -->**
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">

**<!-- JavaScript Bundle with Popper -->**

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
user_108471270 
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>
</button>

You have used data-toggle this attribute used in old Bootstrap versions while in Bootstrap 5 you need to use this attribute data-bs-toggle and one other most important things is you have make (aria-expanded="true").

user_171404520

me too is facing same problem first I changed data-target to data-bs-target and data-toggle to data-bs-toggle second I have included bootstrap.bundle.min.js and cdn link of plain bootstrap.min.js adding two same script cause problem

` 

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



    <div id="navbarSupportedContent" class="collapse navbar-collapse" >
        <ul class="navbar-nav me-auto">
            <li class="nav-item active">
                <a class="nav-link" href=@Url.Action("Index","Home")>Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href=@Url.Action("AboutUs","Home")>About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href=@Url.Action("OurTeam","Home")>Our Team</a>
            </li>
            @*<li class="nav-item">
                <a class="nav-link" href=@Url.Action("Blog","Home")>Blog</a>
            </li>*@
            <li class="nav-item">
                <a class="nav-link" href=@Url.Action("ContactUs","Home")>Contact Us</a>
            </li>
            @*<li class="nav-item">
                <a class="nav-link" href=@Url.Action("LoanCalculator","Home")>Loan Calculator</a>
            </li>*@
        </ul>

    </div>




</nav>`
user_186398170 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <nav class="navbar navbar-dark bg-dark navbar-expand-md">
            <a href="#" class="navbar-brand">DemoTech</a>
            <button
                class="navbar-toggler"
                **data-bs-toggle="collapse"
                data-bs-target="#navbar"**

            >
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="navbar-collapse collapse" id="navbar" navbar>
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
                </ul>
            </div>
        </nav>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

user_186699100 
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
user_148185240

here the 'data-bs-target' id

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#kickMyAss">

and div id must be identical

<div id="kickMyAss" class="collapse navbar-collapse">
user_15770040

You use "data-toggle" this attribute used in Bootstrap 3 you need to use this attribute "data-bs-toggle"

user_169360660

I had issues with dropdown menus in the current site that I'm editing. Tonight I finally have a nav menu with dropdowns that allows the dropdown menu to close after clicking on links! I styled it to look whoo hoo via a different template. However, when I add the menu to the site I'm editing, the mobile toggle menu Isn;t opening. How can I fix that? Thanks! :--)

<!-- ======= Header ======= -->
  <header id="header" class="fixed-top d-flex align-items-center">
    <div class="container">
      <div class="header-container d-flex align-items-center justify-content-between">
          
        <div class="logo">
            
          <!--<h1 class="text-light"><a href="index.html">LOGO TEXT</a></h1>-->
          
          <!-- Uncomment below if you prefer to use an image logo -->
          
          <a class="scrollto" href="#intro"><img src="img/UCF-Logo.svg" height="50" alt="U C F" title="U C F" class="img-fluid top-logo wow bounceOut"></a>
          
          <!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
        </div>

        <nav id="navbar" class="navbar">
            
          <ul>
            
            
            <!--<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
            <li><a class="nav-link scrollto" href="#about">About</a></li>
            <li><a class="nav-link scrollto" href="#services">Services</a></li>
            <li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
            <li><a class="nav-link scrollto" href="#team">Team</a></li>-->
            
            
            <li class="dropdown"><a href="#"><span>About <i class="fas fa-arrow-down"></i></span></a>
              <ul>
                <li><a class="scrollto" href="#about">About</a></li>
                
                <li><a class="scrollto" href="#more-about">Detailed Info</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 03</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 04</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 05</a></li>
                    
                  </ul>
                </li>
                    
                    
                <li class="dropdown"><a href="#"><span>DropDown <i class="fas fa-arrow-down"></i></span></a>
              <ul>
                <li><a class="scrollto" href="#about">DropDown 06</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 07</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 08</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 09</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 10</a></li>
                    
                  </ul>
                </li>
                
                
            <li class="dropdown"><a href="#"><span>DropDown <i class="fas fa-arrow-down"></i></span></a>
              <ul>
                <li><a class="scrollto" href="#contact">Contact Info</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 12</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 13</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 14</a></li>
                
                <li><a class="scrollto" href="#about">DropDown 15</a></li>
                    
                  </ul>
                </li>
                
                
                <!--<li><a href="#">Drop Down 2</a></li>
                <li><a href="#">Drop Down 3</a></li>
                <li><a href="#">Drop Down 4</a></li>
              </ul>
            </li>-->
            
            
            <!--<li><a class="nav-link scrollto" href="#contact">Contact</a></li>-->
            
            
            <li><a class="register scrollto" href="#about">REGISTER! <i class="fas fa-smile-beam fa-x2"></i></a></li>
          </ul>
          
          <i class="fas fa-bars mobile-nav-toggle"></i>
          
        </nav><!-- .navbar -->

      </div><!-- End Header Container -->
    </div>
  </header><!-- End Header -->

user_106552550
Related