Bootstrap 5 Mega Menu Responsive Examples

Bootstrap 5 Mega Menu Responsive Examples
Code Snippet: Bootstrap 5 Navbar Multi Level & Mega Menu
Author: Simon Köhler
Official website: Go to website
Published: 1 week ago
Views: 257

Yet another Bootstrap 5 responsive mega menu with multilevel dropdown examples and search box. This mega navigation system is built with the Bootstrap 5 navbar component with multiple levels of dropdowns. Besides this, a mega dropdown is also placed inside the main navbar that contains the Bootstrap grid layout for links, cards, and link groups.

You are not limited to place only cards and links inside the mega dropdown, you can also place any Bootstrap element like forms, accordions, and images, etc. The menu comes with an animated hamburger button (for mobile view) to toggle nav items.

Basically, this mega menu doesn’t require any JavaScript function as it uses Bootstrap 5 native dropdowns and navbar components. Even, the additional styles are not necessary, the menu is quite compatible with Bootstrap 5.0.2 and above.  Anyhow, a little JS function requires to toggle the hamburger on small screens.

How to Create a Responsive Mega Menu using Bootstrap 5

1. First of all, load the Bootstrap 5 CSS, Font Awesome CSS (for icons), Google Fonts CSS, and Additional CSS (Optional) into the head tag of your webpage.

<!-- Bootstrap 5 CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css'>
<!-- Font Awesome CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
<!-- Google Fonts -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap'>
<!-- Additional CSS (Optional) -->
<link rel="stylesheet" href="css/style.css">

2. After that, create the HTML structure for the mega menu as follows:

<nav class="navbar navbar-expand-lg navbar-light bg-dark navbar-dark shadow">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Bootstrap 5 <span class="badge bg-primary">Mega Menu</span></a>
      <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-content">
        <div class="hamburger-toggle">
          <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </button>
      <div class="collapse navbar-collapse" id="navbar-content">
        <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside">Multilevel</a>
            <ul class="dropdown-menu shadow">
              <li><a class="dropdown-item" href="#">Gallery</a></li>
              <li><a class="dropdown-item" href="blog.html">Blog</a></li>
              <li class="dropstart">
                <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Submenu Left</a>
                <ul class="dropdown-menu shadow">
                  <li><a class="dropdown-item" href=""> Third level 1</a></li>
                  <li><a class="dropdown-item" href=""> Third level 2</a></li>
                  <li><a class="dropdown-item" href=""> Third level 3</a></li>
                  <li><a class="dropdown-item" href=""> Third level 4</a></li>
                  <li><a class="dropdown-item" href=""> Third level 5</a></li>
                </ul>
              </li>
              <li class="dropend">
                <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">Submenu Right</a>
                <ul class="dropdown-menu shadow">
                  <li><a class="dropdown-item" href=""> Second level 1</a></li>
                  <li><a class="dropdown-item" href=""> Second level 2</a></li>
                  <li><a class="dropdown-item" href=""> Second level 3</a></li>
                  <li class="dropend">
                    <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Let's go deeper!</a>
                    <ul class="dropdown-menu dropdown-submenu shadow">
                      <li><a class="dropdown-item" href=""> Third level 1</a></li>
                      <li><a class="dropdown-item" href=""> Third level 2</a></li>
                      <li><a class="dropdown-item" href=""> Third level 3</a></li>
                      <li><a class="dropdown-item" href=""> Third level 4</a></li>
                      <li><a class="dropdown-item" href=""> Third level 5</a></li>
                    </ul>
                  </li>
                  <li><a class="dropdown-item" href=""> Third level 5</a></li>
                </ul>
              </li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown dropdown-mega position-static">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside">Megamenu</a>
            <div class="dropdown-menu shadow">
              <div class="mega-content px-4">
                <div class="container-fluid">
                  <div class="row">
                    <div class="col-12 col-sm-4 col-md-3 py-4">
                      <h5>Title</h5>
                      <div class="list-group">
                        <a class="list-group-item" href="#">Mega Menu Link</a>
                        <a class="list-group-item" href="#">Mega Menu Link</a>
                        <a class="list-group-item" href="#">Mega Menu Link</a>
                      </div>
                    </div>
                    <div class="col-12 col-sm-4 col-md-3 py-4">
                      <h5>Card Title</h5>
                      <div class="card">
                  <img src="img/banner-image.jpg" class="img-fluid" alt="image">
                  <div class="card-body">
                    <p class="card-text">Description goes here...</p>
                  </div>
                </div>
                    </div>
                    <div class="col-12 col-sm-4 col-md-3 py-4">
                      <h5>Title</h5>
                        <p>Description goes here...</p>
                    </div>
                    <div class="col-12 col-sm-12 col-md-3 py-4">
                      <h5>Title</h5>
                      <div class="list-group">
                        <a class="list-group-item" href="#">Menu Link</a>
                        <a class="list-group-item" href="#">Menu Link</a>
                        <a class="list-group-item" href="#">Menu Link</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form class="d-flex ms-auto">
            <div class="input-group">
                <input class="form-control border-0 mr-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-primary border-0" type="submit">Search</button>
            </div>
        </form>
      </div>
    </div>
  </nav>

3. Load the Bootstrap 5 JS by adding the following CDN link just before closing the body tag.

<!-- Bootstrap 5 JS -->
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js'></script>

4. Finally, initialize the hamburger button in the JS function to make the mega menu responsive.

document.addEventListener('click',function(e){
  // Hamburger menu
  if(e.target.classList.contains('hamburger-toggle')){
    e.target.children[0].classList.toggle('active');
  }
}) 

That’s all! Hopefully, you have successfully integrated this Bootstrap 5 responsive mega menu with multilevel examples into your web project. If you have any questions or suggestions, let me know by comment below.

Be the first to comment

Leave a Reply

Your email address will not be published.


*


ten + eleven =

This site uses Akismet to reduce spam. Learn how your comment data is processed.