2

I am new to Bootstrap. Using latest version 4.5.0, I want to create a multilevel menu, with three levels. There are various instances of these in Bootstrap 4.4.1 however the model for navbar and dropdowns has changed in 4.5.0.

There is an explanation of Navbar in the official documentation and this demonstrates a two level menu. I can't seem to find an example of how to extend this to three levels or understand how this can be constructed. I tried the following which is a simple extension of the two levels to three but it doesn't work. It fails when clicking on the link to the third level labelled 2 Dropdown link.

The original navbar documentation uses a click based approach to viewing the menu. It would also be advantageous to see how a 4.5.0 menu can be made to work on hover.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <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>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown link
                    </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">2 Action</a>
            <a class="dropdown-item" href="#">2 Another action</a>

            <div class="dropdown-item">
              <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                2 Dropdown link
                            </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">
                <a class="dropdown-item" href="#">3 Action</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>

Any suggestions as to correct code, enabling documentation or functioning examples welcome.

RCRalph
  • 355
  • 6
  • 17
Simon Stewart
  • 21
  • 1
  • 6
  • take a look at this codePen [example](https://codepen.io/Deviant96/pen/NWxdEvG?editors=1000) – Uzair Sep 13 '20 at 10:49
  • This example is interesting but needs some better features to be useable. When the dropdown option is clicked in the example, **all** the descendant suboptions appear to **all** levels. What is required is that when the dropdown menu is clicked that the next submenu appears without further levels. Then when that level is clicked the next "sub-submenu" appears also without any further levels. Any code to do this would be very welcome. @Uzair – Simon Stewart Sep 15 '20 at 08:00

0 Answers0