Tạo Menu Navbar nhiều cấp với Bootstrap 5

Bootstrap 5 mặc định chỉ hỗ trợ dropdown 1 cấp trong navbar. Để tạo menu đa cấp (nhiều cấp), bạn cần bổ sung CSS tùy chỉnh để hiển thị menu con khi di chuột (hover) và điều chỉnh lại cấu trúc HTML để lồng các thẻ <ul> và <li> vào nhau. 

Menu Navbar nhiều cấp với Bootstrap 5 

Trong bài viết hôm nay tôi sẽ hướng dẫn các bạn cách để chúng ta tạo ra 1 Menu 2 cấp với Bootstrap

• Sử dụng các lớp dropdown-menu lồng nhau. 
• Thêm CSS để hiện dropdown-menu khi hover

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Menu</a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <!-- Cấp 1 -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-bs-toggle="dropdown">
            Menu 1
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Con 1.1</a></li>
            
            <!-- Cấp 2 -->
            <li class="dropdown-submenu">
              <a class="dropdown-item dropdown-toggle" href="#">Con 1.2 (Multi)</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Cháu 1.2.1</a></li>
                <li><a class="dropdown-item" href="#">Cháu 1.2.2</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<style>
/* CSS cho menu đa cấp */
.dropdown-submenu { position: relative; }
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
/* Hiển thị khi hover */
.dropdown-submenu:hover .dropdown-menu {
    display: block;
}
</style>