Navbar Dropdowns

Another crucial factor of every website is to have dropdowns and mega submenus. In the below content, you will find how to add responsive navigation on your web page.

Switch context-oriented overlays for showing arrangements of links and more with the Bootstrap Rev dropdown module. Check out your favorite navbar dropdown menu and start designing the website.

Here, you are going to find a list of dropdown website templates. Let's make designing fun and easy.

Basic dropdown navbar / Level One navigation

It is the most used and most common type of dropdown menu. The user can find it in most sites where one needs to add sub-elements in one link element. If the user hovers over the About Us, they will find the dropdown with items in it.

One can copy the code and modify it as per their need.

• sub-list is the list of links that appears under the main link element.
• Add, Remove and Edit sub links using li tags.
• Change the code as per your convenience after copying and pasting it to your editor.

How to use

• Simply add a has-sub-nav class in the li in which you want to show the basic dropdown navbar.

• Now add a new ul list with the sub-list class.

<ul>
  <li class="has-sub-nav">
    <a href="#">About Us</a> <i class="bi bi-chevron-down"></i>
      <ul class="sub-list">
        <li>
            <a href="#">Link</a>
        </li>
        <li>
            <a href="#">Link</a>
        </li>
        <li>
            <a href="#">Link</a>
        </li>
    </ul>
  </li>
</ul>

Level Two Navigation

Here, you will find the navbar dropdown menu in which there is a dropdown inside a dropdown. In other words, if the user hovers over the main link element with the dropdown option, there a list of links appears. Inside those links, there will be more dropdown link components with sublinks.

• has-sub-nav is the main list class under which the dropdown link element appears.
• sub-list is the list of links that appears under the main link element.
• Add, Remove and Edit sub links using li tags.
• Modify the code as per your need.

How to use?

• Simply add a has-sub-nav class in the li in which you want to show the basic dropdown navbar.

• Now add a new ul list with a third-level-navigation class.

<ul>
  <li class="has-sub-nav">
    <a href="#">About Us</a> <i class="bi bi-chevron-down"></i>
    <ul class="sub-list">
        <li>
            <a href="#">Link <i class="bi bi-chevron-right"></i></a>
              <ul class="third-level-navigation">
                <li>
                    <a href="#">Some Link</a>
                </li>
                <li>
                    <a href="#">One Some Link</a>
                </li>
                <li>
                    <a href="#">Another Link</a>
                </li>
            </ul>
          </li>
        <li>
            <a href="#">Link</a>
        </li>
        <li>
            <a href="#">Link</a>
        </li>
    </ul>
  </li>
</ul>

Mega Menu

Inside the mega menu option of the navbar dropdown, the user can see the broad list of sub-categories by hovering through the main list component.

• has-mega-header class need to be added in the main parent of the header to identify if this header have a mega menu or not.
• mega-header is the class name for the main div container under which the list of sub-categories appears.

How to use?

• Add has-mega-header class in header tag.

• Add div with mega-header class in the li you wanna show mega menu.

<header class="navigation-wrapper has-mega-header position-relative">
  <div class="container navigation-inner">
    <nav class="left-nav xs-nav">
        <ul>
            <li>
                <a href="#">About Us</a> <i class="bi bi-chevron-down"></i>
                  <div class="mega-header">
                    <ul class="container">
                        <li class="col-md-3">
                            <a href="#">necessitatibus yeme</a>
                            <a href="#">Similique officiis</a>
                            <a href="#">laudantium de</a>
                            <a href="#">nemo illum</a>
                        </li>
                        <li class="col-md-3">
                            <a href="#">Lorem ipsum dolor sit</a>
                            <a href="#">adipisicing elit</a>
                            <a href="#">amet consectetur</a>
                            <a href="#">quo cum hic at</a>
                        </li>
                        <li class="col-md-3">
                            <a href="#">dicta non</a>
                            <a href="#">Veniam provident</a>
                            <a href="#">omnis perferendis quae</a>
                            <a href="#">sapiente laudantium</a>
                        </li>
                        <li class="col-md-3">
                            <a href="#">est culpa nisi</a>
                            <a href="#">quaerat laborum</a>
                            <a href="#">Voluptatibus</a>
                            <a href="#">adipisicing elit</a>
                        </li>
                    </ul>
                </div>
              </li>
            <li>
                <a href="#">Project Tour</a>
            </li>
            <li>
                <a href="#">Make My Project</a>
            </li>
        </ul>
    </nav>
    <div class="logo" style="background: url(https://bootstraprev.com/../img/logo.png)"></div>
      <nav class="right-nav">
        <ul>
            <li>
                <a href="#"> Sign In </a>
            </li>
            <li>
                <a href="#"> Register </a>
            </li>
            <li>
                <a href="#"> <i class="bi bi-search"></i></a>
            </li>
            <li>
                <a href="#"> <i class="bi bi-cart"></i> </a>
            </li>
        </ul>
      </nav>
    <div class="menu-trigger"> <i class="bi bi-list"></i> </div>
    <div class="menu-close"> <i class="bi bi-x"></i> </div>
  </div>
</header>