Navbar dropdown (collapse) is not working in Bootstrap 5
Question
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>
9 answers
solution1
30 2020-12-17 13:37:03
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>
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 .
solution2
0 2020-12-17 13:31:10
<!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>
solution3
0 2021-10-08 18:52:02
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>
solution4
0 2021-11-16 05:03:18
You have used "data-toggle" this attribute used in old bootsrap 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")
solution5
0 2021-11-17 08:37:01
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 -->
solution6
0 2022-03-31 06:26:42
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>`
solution7
0 2022-04-01 18:46:55
<,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>
solution8
-1 2021-08-27 18:22:53
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">
solution9
-1 2021-09-17 10:15:51
You use "data-toggle" this attribute used in Bootstrap 3 you need to use this attribute "data-bs-toggle"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.