39

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>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Sonet Adhikary
  • 466
  • 1
  • 4
  • 8
  • can you try with navbar bootstrap 5.0 example https://getbootstrap.com/docs/5.0/components/navbar/ and read the migration documentation https://getbootstrap.com/docs/5.0/migration/ – Jérôme Teisseire Dec 17 '20 at 13:41

11 Answers11

103

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 means 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.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 7
    This should be the accepted answer. The official docs (beta) currently give a wrong example which does _not_ have the namespaced `data` attributes. – bovender May 04 '21 at 16:36
  • 1
    Actually the official docs _do_ get it right (of course). I tripped over devdocs.io where I had enabled the BS4 docs rather than the BS5 docs, so watch out for that. – bovender May 04 '21 at 16:43
  • 3
    I copied my navbar from the Boostrap 5 docs example code and I still had to change this. – createscape Jan 10 '22 at 20:50
  • Thanks for this. Cost me a ton of time to get here, unfortunately, but this works a treat. – David T. Macknet Mar 29 '22 at 19:44
  • 2
    I'm astounded that the docs still give an example that doesn't work without stumbling into this answer. – Nick May 31 '22 at 21:13
14

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>
Sahil Kumar Singh
  • 179
  • 1
  • 7
  • 1
    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](/help/how-to-answer). – Muhammedogz Oct 08 '21 at 20:21
  • Great answer! Solved my issues. – Carson Cole Nov 03 '22 at 18:13
  • The dropdown menu appears after adding this, thank you! – Lionlollipop Mar 20 '23 at 06:37
8
<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").

isherwood
  • 58,414
  • 16
  • 114
  • 157
osama
  • 81
  • 1
  • 3
2

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>`
sumit dubey
  • 83
  • 6
  • 1
    I have wasted entire one day in this problem. so please remember never use two same scripts either use bootstrap.bundle.min.js or bootstrap.min.js – sumit dubey Mar 31 '22 at 06:29
  • This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/31420164) – Ethan McTague Apr 01 '22 at 17:43
1

For me just solve this issue by adding -bs to data-target and data-toggle

<button
      className="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNavDropdown"
      aria-controls="navbarNavDropdown"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
Saeed Aldosary
  • 11
  • 2
0

<!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>
Priyanshu Gupta
  • 1
  • Welcome to SO! Please edit your answer and add a textual explanation, why and how it works and how it is different from the other answers given. – ahuemmer Apr 04 '22 at 08:43
0

Besides including the JS link in the body the buttons and div have same aria-control/data-bs-target and ID :

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" aria-controls='navbarSupportedContent'

<div class="collapse navbar-collapse" id="navbarSupportedContent">

Agrover112
  • 461
  • 5
  • 9
-1
<!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>
Tayyab ali
  • 31
  • 1
  • 2
  • 10
-1

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

user16936066
  • 9
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 17 '21 at 11:11
-1

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 -->
TipTop
  • 13
  • 6
  • 1
    This is not an answer to the original question. Ask it as a new Question or use the comment section but not post a new question as answer. – Daniel W. Nov 17 '21 at 08:40
  • If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/late-answers/30362942) – Sfili_81 Nov 17 '21 at 13:07
  • The code that I posted here runs great on the template that I found it on, and that's supposed to be a BS 5 template. Somebody please copy / paste my code as I have it, and add to that coding what could help. Much Thanks! :--) – TipTop Nov 17 '21 at 20:44
-2

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">
Sushan
  • 3,153
  • 2
  • 23
  • 21