CODEWITHSUNDEEP
twitter-bootstrapbootstrap-5
Varga Zoli
Varga Zoli

Reputation: 91

Multi level dropdown menu in Bootstrap 5

I want use multi level dropdown menu for new Bootsrap 5. I try the old codes for 4, but nothing works. Does anyone have a working code for Bootstrap 5?

Upvotes: 4

Views: 10450

Answers (2)

A30590
A30590

Reputation: 131

You can achieve it by using the normal bootstrap components without any extra javascript code: The idea is to use the Dropdowns component with nested Dropend or Dropstart components with the option data-bs-auto-close="outside" on the parent Dropdown component. check below quick example:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="dropdown">
    <button
            class="btn btn-secondary dropdown-toggle bg-transparent text-dark btn-sm ms-3"
            type="button"
            id="MyAccountDDM"
            data-bs-toggle="dropdown"
            data-bs-auto-close="outside"
            aria-expanded="false">
        AAA
    </button>

    <ul class="dropdown-menu" aria-labelledby="MyAccountDDM" id="AppDropDownId">
        <li><a>BBB</a></li>
        <li>
            <div class="btn-group dropend">
                <a type="button" class="dropdown-item dropdown-toggle p-0" data-bs-toggle="dropdown"
                   aria-expanded="false">
                    CCC
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">DDD</a></li>
                    <li><a class="dropdown-item" href="#">EEE</a></li>
                </ul>
            </div>
        </li>

        <li><hr class="dropdown-divider"/></li>
        <li><a>FFF</a></li>

    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
        crossorigin="anonymous"></script>
</body>
</html>

Upvotes: 9

Muhammad Bilal
Muhammad Bilal

Reputation: 3008

Multi-level menu items with little css customization

.dropdown:hover >.dropdown-menu{
  display: block !important;
}
.dropdown-submenu:hover > .dropdown-menu{
  display: block !important;
    left: 100%;
    margin-top: -37px;
}

.dropdown-item{
  font-size: small; /* 13px */
}
.dropdown-toggle::after{
  font-size: var(--font-md);
  margin-bottom: -2px;
}
.dropdown-menu li a.active{
  color:#fff;
}

.custom-toggle-arrow{
      font-size: 18px;
      margin-top: 1px;
      line-height: 12px;
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <nav class="nav justify-content-center" aria-label="Secondary navigation">
              <li class="nav-item"><a class="nav-link" href="#">Single Item</a></li>
        
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"                     aria-expanded="false">
                  Multi-level Item
                </a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#"> Menu Item 1</a></li>
                  <li><a class="dropdown-item" href="#"> Menu Item 2</a></li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item" href="#"> Second Level <span
                        class="float-end custom-toggle-arrow">&#187</span></a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Second Level Item 1</a></li>
                      <li><a class="dropdown-item" href="#">Second Level Item 2</a></li>
    
                      <li class="dropdown-submenu">
                        <a class="dropdown-item" href="#"> Third Level <span
                            class="float-end custom-toggle-arrow">&#187</span></a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Third Level Item 1</a></li>
                          <li><a class="dropdown-item" href="#">Third Level Item 2</a></li>
                        </ul>
                      </li>
    
    
                    </ul>
                  </li>
                </ul>
              </li>
  </nav>
            
           
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

Reference: Link

Upvotes: 5

Related Questions