Bootstrap navbar 2 level dropdown

Is there a slick way to add a second dropdown level to the standard Bootstrap navbar? So when you click the “Dropdown” link it shows the menu but within it has another dropdown?

<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Expand at xl</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExample06">
        <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">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown06">
              <a class="dropdown-item" href="#">Action</a>
               /* Add 2nd level dropdown menu here*/      
              <a class="dropdown-item" href="#">Dropdown item here</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-md-0">
          <input class="form-control" placeholder="Search" type="text">
        </form>
      </div>
    </nav>
        

Bootstrap menu from above as seen here:
https://getbootstrap.com/docs/4.1/examples/navbars/

Check this

3 Likes

I see that there is a better solution above but as I was already half way through this I’ll post it anyway :slight_smile:

I just nested the existing code and added a couple of classes and a couple of lines of css and the basics seem to work.

The only thing that needs sorting is that clicking the menu item again closes the whole menu but that would be a js question beyond my scope :slight_smile:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.