How do I make embedded dropdowns in Bootstrap 4.3?

Question

I am trying to implement dropdowns inside a dropdown menu in Bootstrap 4.3. I tried this code that seems to be logical but it doesn't work.

<html>
  <head>
    <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">
    <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>
  </head>
  <body>
    <button class="btn btn-success" id="dropdownMenuButton" data-toggle="dropdown">Click</button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <li>
        <a class="dropdown-item" href="#" role="button" id="dropdownSubmenuButton1" data-toggle="dropdown">Item 1</a>
        <div class="dropdown-menu" aria-labelledby="dropdownSubmenuButton1">
          <a class="dropdown-item" href="#">Submenu 1, Item 1</a>
          <a class="dropdown-item" href="#">Submenu 1, Item 2</a>
        </div>
      </li>
      <li>
        <a class="dropdown-item" href="#" role="button" id="dropdownSubmenuButton2" data-toggle="dropdown">Item 2</a>
        <div class="dropdown-menu" aria-labelledby="dropdownSubmenuButton2">
          <a class="dropdown-item" href="#">Submenu 2, Item 1</a>
          <a class="dropdown-item" href="#">Submenu 2, Item 2</a>
        </div>
      </li>
    </ul>
  </body>
</html>

On click at the root menu item it closes without showing any submenu. I also tried to replace ul-li with div-a way as it's shown in the documentation here: https://getbootstrap.com/docs/4.3/components/dropdowns/

<html>
  <head>
    <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">
    <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>
  </head>
  <body>
    <button class="btn btn-success" id="dropdownMenuButton" data-toggle="dropdown">Click</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#" role="button" id="dropdownSubmenuButton1" data-toggle="dropdown">Item 1</a>
      <div class="dropdown-menu" aria-labelledby="dropdownSubmenuButton1">
        <a class="dropdown-item" href="#">Submenu 1, Item 1</a>
        <a class="dropdown-item" href="#">Submenu 1, Item 2</a>
      </div>
      <a class="dropdown-item" href="#" role="button" id="dropdownSubmenuButton2" data-toggle="dropdown">Item 2</a>
      <div class="dropdown-menu" aria-labelledby="dropdownSubmenuButton2">
        <a class="dropdown-item" href="#">Submenu 2, Item 1</a>
        <a class="dropdown-item" href="#">Submenu 2, Item 2</a>
      </div>
    </div>
  </body>
</html>

It doesn't work also. But in this case on click at the second link (Item 2) the first submenu opens (Submenu 1) instead of the bound Submenu 2.

Does this answer your question? [Bootstrap 4: Multilevel Dropdown Inside Navigation](https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation) — mayersdesign, Mar 01 '20 at 14:53
Not really. They consider ONE embedded dropdown and navigation menu instead of the plain one. My case is different. — Fomalhaut, Mar 01 '20 at 14:59
Bootstrap 4 doesn't support multi-level / nested dropdowns. Here's a link to get you started - you have to put the css and js together for this yourself. [link](https://bootstrapstudio.io/tutorials/multilevel-dropdowns) — Lasse Holm, Mar 01 '20 at 15:08

How do I make embedded dropdowns in Bootstrap 4.3?

0 Answers0