Bootstrap 5.0.2 hamburger menu not working

Question

I am using bootstrap 5.0.2 version Here I am trying for hamburger menu.

Here is my code.

<nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="#">Sample</a>

    <button class="navbar-toggler" style="margin-right:5px !important;" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
              </button>
    <div class="collapse navbar-collapse top_nav" id="navbarSupportedContent">
        <ul class="navbar-nav mx-auto ">
            <li class="nav-item">
                <a href="#" class="nav-link">Home</a>
                <hr class="hr_nav">
            </li>
            <li class="nav-item "><a href="#" class="nav-link">About Us</a>
            </li>
            <li class="nav-item "><a href="#" class="nav-link">Support</a>
            </li>
            <li class="nav-item "><a href="#" class="nav-link">Contact Us</a>
            </li>
        </ul>
        <ul class="navbar navbar-nav navbar-right" style="display:flex;">
            <li>
                <button class="btn top_login">
                    Login
                </button>
            </li>
            <li>
                <button class="btn sign_btn">
                    SignUp
                </button>
            </li>
        </ul>
    </div>
</nav>

What I am doing wrong here why hamburger menu not working.

When I search STO I got the reply that I need to add Jquery.

But others saying Bootstrap 5 is designed to be used without jQuery, but it's still possible to use our components with jQuery. If Bootstrap detects jQuery in the window object it'll add all of our components in jQuery's plugin system; this means you'll be able to do $('[data-bs-toggle="tooltip"]').

Here if you see I had the reference image

I have added the code here

I am not getting the menu when i click the hamburger

The other question has been answered already. is there something else in particular that is not answered there? — blurfus, Sep 15 '21 at 19:09
That's hardly a good description of what the issue is. Have you tried the suggestions in the dupe question and they didn't work for you? What did you do and what errors did you get? — blurfus, Sep 15 '21 at 19:16
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/237151/discussion-between-mr-m-and-blurfus). — Mr.M, Sep 15 '21 at 19:25
As I mentioned in the chat, please include an [mcve] of the issue you are having... It is very hard to debug an image — blurfus, Sep 15 '21 at 19:39
@blurfus I have added the code in online tool (Liveweaver) please check — Mr.M, Sep 15 '21 at 19:49

score 7 · Accepted Answer · answered Sep 15 '21 at 19:56

Your data attributes are incorrect. Instead of naming them data-bs-toggle and data-bs-target you named them without the -bs and they would not work.

See the code below and running example:

<button class="navbar-toggler" style="margin-right:5px !important;" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
    <span class="navbar-toggler-icon"></span>
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-lg navbar-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sample</a>

    <button class="navbar-toggler" style="margin-right:5px !important;" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
              </button>
    <div class="collapse navbar-collapse top_nav" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto ">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
          <hr class="hr_nav">
        </li>
        <li class="nav-item "><a href="#" class="nav-link">About Us</a>
        </li>
        <li class="nav-item "><a href="#" class="nav-link">Support</a>
        </li>
        <li class="nav-item "><a href="#" class="nav-link">Contact Us</a>
        </li>
      </ul>
      <ul class="navbar navbar-nav navbar-right" style="display:flex;">
        <li>
          <button class="btn top_login">
                    Login
                </button>
        </li>
        <li>
          <button class="btn sign_btn">
                    SignUp
                </button>
        </li>
      </ul>
    </div>
  </div>
</nav>

I asked chatGPT for solutions to this, no joy. This little change saved me from hair pulling frustration. StackOverflow! — MIkee, Apr 14 '23 at 14:29

Bootstrap 5.0.2 hamburger menu not working

1 Answers1