bootstrap-4menunavbarbootstrap-5multi-level

Multi Level Menu Navbar using Bootstrap 5


I have a problem with a multi-level menu using bootstrap 5, here I have created a multi-level menu but when I run it the menu doesn't appear sideways and instead appears directly under the previous menu, I will include a Codepen link that you can check

Code in codepen: https://codepen.io/heriirawan/pen/QWBzKPK

Here is CSS code

    /*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar .navbar-brand {
    height: 75px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: var(--dark);
    font-weight: 500;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}

.navbar .btn:hover {
    color: #FFFFFF !important;
    background: var(--primary) !important;
}

HTML Code :

<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top p-0 px-4 px-lg-5">
  <a href="index.html" class="navbar-brand d-flex align-items-center">
    <h2 class="m-0 text-primary"><img class="img-fluid me-2" src="img/icon-1.png" alt="" style="width: 45px;">Navbar</h2>
  </a>
  <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <div class="navbar-nav ms-auto py-4 py-lg-0">
      <a href="index.html" class="nav-item nav-link active">Home</a>
      <a href="about.html" class="nav-item nav-link">About</a>
      <a href="service.html" class="nav-item nav-link">Service</a>
      <a href="roadmap.html" class="nav-item nav-link">Roadmap</a>
      <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Level 1</a>
        <div class="dropdown-menu shadow-sm m-0">
          <a href="feature.html" class="dropdown-item">Menu 1</a>
          <a href="token.html" class="dropdown-item">Menu 2</a>
          <a href="faq.html" class="dropdown-item">Menu 3</a>
          <div class="nav-item dropdown">
            <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Level 2</a>
            <div class="dropdown-menu shadow-sm m-0">
              <a href="feature.html" class="dropdown-item">Menu 1</a>
              <a href="token.html" class="dropdown-item">Menu 2</a>
              <a href="faq.html" class="dropdown-item">Menu 3</a>
              <div class="nav-item dropdown">
                <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Level 3</a>
                <div class="dropdown-menu shadow-sm m-0">
                  <a href="feature.html" class="dropdown-item">Menu 1</a>
                  <a href="token.html" class="dropdown-item">Menu 2</a>
                  <a href="faq.html" class="dropdown-item">Menu 3</a>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <a href="contact.html" class="nav-item nav-link">Contact</a>
    </div>
    <div class="h-100 d-lg-inline-flex align-items-center d-none">
      <a class="btn btn-square rounded-circle bg-light text-primary me-2" href=""><i class="fab fa-facebook-f"></i></a>
      <a class="btn btn-square rounded-circle bg-light text-primary me-2" href=""><i class="fab fa-twitter"></i></a>
      <a class="btn btn-square rounded-circle bg-light text-primary me-0" href=""><i class="fab fa-linkedin-in"></i></a>
    </div>
  </div>
</nav>

Solution

  • You need to use relative positioning, and then position the menus using top, left, right, etc.. as desired.

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
      /* top level */
    .navbar-nav > .dropdown:hover > .position-relative > .dropdown-menu {
    top: 0;
    right: 0;
    }
    
    /* sub levels */
    .navbar-nav .position-relative .position-relative .dropdown-menu {
    top: 10px;
    right: 50%;
    margin-top: -1px;
    }
    
    .navbar-nav > .dropdown > .position-relative > .dropdown-menu,
    .navbar-nav .position-relative .dropdown > .position-relative > .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    }
    
    .navbar-nav > .dropdown:hover > .position-relative > .dropdown-menu,
    .navbar-nav .position-relative .dropdown:hover > .position-relative > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transition: .5s;
    }
    </style>
    <body>
    <div class="navbar-nav ms-auto py-4 py-lg-0">
            <a href="index.html" class="nav-item nav-link active">Home</a>
            <a href="about.html" class="nav-item nav-link">About</a>
            <a href="service.html" class="nav-item nav-link">Service</a>
            <a href="roadmap.html" class="nav-item nav-link">Roadmap</a>
            <div class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-displa="static">Level 1</a>
                <div class="position-relative">
                    <div class="dropdown-menu shadow-sm m-0">
                        <a href="feature.html" class="dropdown-item">Menu 1</a>
                        <a href="token.html" class="dropdown-item">Menu 2</a>
                        <a href="faq.html" class="dropdown-item">Menu 3</a>
                        <div class="nav-item dropdown">
                            <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Level 2</a>
                            <div class="position-relative">
                                <div class="dropdown-menu shadow-sm m-0">
                                    <a href="feature.html" class="dropdown-item">Menu 1</a>
                                    <a href="token.html" class="dropdown-item">Menu 2</a>
                                    <a href="faq.html" class="dropdown-item">Menu 3</a>
                                    <div class="nav-item dropdown">
                                        <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Level 3</a>
                                        <div class="position-relative">
                                            <div class="dropdown-menu shadow-sm m-0">
                                                <a href="feature.html" class="dropdown-item">Menu 1</a>
                                                <a href="token.html" class="dropdown-item">Menu 2</a>
                                                <a href="faq.html" class="dropdown-item">Menu 3</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a href="contact.html" class="nav-item nav-link">Contact</a>
        </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
    </body>


    Demo Bootstrap 5.2.3
    Demo Bootstrap 5.3.0


    Also see