1

I have to wonder why bootstrap does not provide a multilevel dropdown in the top navbar.

https://www.youtube.com/watch?v=jEAeDID1pks

From this video, I could see the exact requirement for me, but implementation somehow fails. It is like some time I could get the working output and sometimes it's not.

I am not very aware of jQuery, but I think this is only possible through jQuery because I searched for a lot of options.

basic bootstrap navbar

This above picture is the basic top navbar provided by bootstrap. I want another submenu in that dropdown which leads to another submenu.

required navbar

I need something like above.

https://getbootstrap.com/docs/4.0/components/navbar/

from the above link, I referred to the navbar documentation from bootstrap.

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

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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="#">Link</a>
      </li>
      <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>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

This is the code for the basic navbar. I am using angular 7 in my case. I wonder if there any other frameworks which support this requirement in angular 7.

Derek Adair
  • 21,846
  • 31
  • 97
  • 134
ADARSH K
  • 606
  • 1
  • 8
  • 21
  • Related https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation. Possible duplicate – koder613 Sep 29 '20 at 08:25
  • 1
    I also faced similar issue. – Neenu Chandran Sep 29 '20 at 08:25
  • 1
    @koder613 Let me look into this once more, I think I already tried this because I tried a lot of ways for the last month. – ADARSH K Sep 29 '20 at 08:28
  • @ADARSHK For further insight: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h – koder613 Sep 29 '20 at 08:31
  • @koder613 while I am using *ngFor to iterate the list I have, The Submenu is not expanding while clicking. How can I solve this? Eagerly waiting for your response. – ADARSH K Oct 20 '20 at 12:18
  • @koder613 I found the problem, It is because the Jquery is not loading while using *ngFor. I dont know why, When I pasted the jQuery in browser console, it works well. So is there any ways to load it from angular side itself? I tried adding in angular.json as an external script file, tried adding in app.component.html as – ADARSH K Oct 20 '20 at 16:13

0 Answers0