Multi Level Menu Navbar using Bootstrap 5

Question

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>

Carol Skelly · Accepted Answer · 2023-08-07T13:30:22.353

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

I coulin't get it to work, cold you add your imports for bootstraps and scrips. — JustinKSU, Aug 06 '23 at 12:25
@JustinKSU you can't get it to work, and eventhough it's the working, accepted answer you down vote it?? Look at the demo.. Bootstrap 5.2.3 and additional CSS already provided — Carol Skelly, Aug 07 '23 at 13:12
I apologize. I removed the downvote. I still can't get it work from you answer. There answer works on codeply but it brings in font awesome. I spent 1-2 hours couldn't get it to work like it does on codeply. I went with https://stackoverflow.com/a/74091007/724835 as it doesn't need the script. — JustinKSU, Aug 08 '23 at 11:47

Multi Level Menu Navbar using Bootstrap 5

1 Answers1