Create cool Bootstrap 5 multilabel navbar With toggle effect

In bootstrap 5, Nav Bar is used to connect and link all the web pages related to a website and a user can move between pages easily. Navigation bar is a very important component of a website that contains a brand logo, page names and their links, and a search box according to user requirements.

First I used Bootstrap For Navbar And Fontawesome For Icon.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">

HTML Code:

<nav class="navbar navbar-expand-lg bg-white shadow-sm">
        <div class="container-fluid">
            <h1 class="navbar-brand">
                <a href="https://www.deshamarbd.com/"><img src="https://www.deshamarbd.com/img/logo.png" class="navbar-brand-logo" alt="DeshAmarBD"></a>
                <!-- <a class="navbar-brand" href="#">Navbar</a> -->
            </h1>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
                aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar">
                <span class="vr"></span>
                <ul class="navbar-nav me-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">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Dropdown
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown"
                            data-bs-auto-close="outside" role="button" aria-expanded="false">
                            Multi Dropdown
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Buttons</a></li>
                            <li class="dropend">
                                <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown"
                                    data-bs-auto-close="outside" role="button" aria-expanded="false">
                                    Cards
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#" class="dropdown-item">
                                            Card actions
                                        </a></li>
                                    <li><a href="#" class="dropdown-item">
                                            Cards Masonry
                                        </a></li>
                                </ul>
                            </li>
                            <a class="dropdown-item" href="#">
                                Colors
                            </a>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                </ul>

                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <form action="." method="get">
                        <div class="input-icon">
                            <input type="text" value="" class="form-control" placeholder="Search…"
                                aria-label="Search in website">
                            <span class="input-icon-addon">
                                <i class="fas fa-search"></i>
                            </span>
                        </div>
                    </form>

                    <span class="mx-2 vr"></span>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fab fa-pinterest-p"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fab fa-youtube"></i></a>
                    </li>
                    <span class="mx-2 vr"></span>
                    <li class="nav-item dropdown d-flex lh-1 text-reset p-0">
                        <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown"
                            aria-label="Open user menu">
                            <img src="https://www.deshamarbd.com/uploads/logo/logo_628b36adbea16.png" class="avatar avatar-sm" alt="">
                            <div class="d-none d-xl-block ps-2">
                                <div>RH Suman</div>
                                <div class="mt-1 small text-muted">UI Designer</div>
                            </div>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="#">Dashboard</a></li>
                            <li><a class="dropdown-item" href="#">Settings</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">Logout</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

CSS Code:

Basic CSS Code For body

body {
  background-color: #f5f5f7;
  color: #ccc;
  font-family: 'Oswald', sans-serif;
  font-size: .9rem;
  min-height: 100vh;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

Navbar

.navbar {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  min-height: 3.5rem;
  position: relative;
  z-index: 15;
}
/* Navbar Brand Logo */
.navbar-brand-logo {
  height: 30px;
}

.navbar .navbar-brand:hover {
  opacity: 0.8;
}

.navbar .dropdown-menu {
  border-radius: 0;
}

Navbar toggler Effect

/* Navbar collapse effect */
.navbar-collapse .navbar {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.navbar.collapsing {
  min-height: 0;
}

/* navbar toggler effect */
.navbar-toggler {
  padding: 0;
  width: 2rem;
  height: 2rem;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-transition: -webkit-box-shadow 0.15s ease-in-out;
  transition: -webkit-box-shadow 0.15s ease-in-out;
  transition: box-shadow 0.15s ease-in-out;
  transition: box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    -webkit-transition: none;
    transition: none;
  }
}

.navbar-toggler:hover {
  text-decoration: none;
}

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  -webkit-box-shadow: 0 0 0 0;
          box-shadow: 0 0 0 0;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.25em;
  height: 2px;
  background: currentColor;
  border-radius: 10px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  -webkit-transition: top 0.2s 0.2s, bottom 0.2s 0.2s, opacity 0s 0.2s, -webkit-transform 0.2s;
  transition: top 0.2s 0.2s, bottom 0.2s 0.2s, opacity 0s 0.2s, -webkit-transform 0.2s;
  transition: top 0.2s 0.2s, bottom 0.2s 0.2s, transform 0.2s, opacity 0s 0.2s;
  transition: top 0.2s 0.2s, bottom 0.2s 0.2s, transform 0.2s, opacity 0s 0.2s, -webkit-transform 0.2s;
  position: relative;
}

.navbar-toggler-icon:before,
.navbar-toggler-icon:after {
  content: "";
  display: block;
  height: inherit;
  width: inherit;
  border-radius: inherit;
  background: inherit;
  position: absolute;
  left: 0;
  -webkit-transition: inherit;
  transition: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .navbar-toggler-icon:before,
  .navbar-toggler-icon:after {
    -webkit-transition: none;
    transition: none;
  }
}

.navbar-toggler-icon:before {
  top: -0.45em;
}

.navbar-toggler-icon:after {
  bottom: -0.45em;
}

.navbar-toggler[aria-expanded=true] .navbar-toggler-icon {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: top 0.3s, bottom 0.3s, opacity 0s 0.3s, -webkit-transform 0.3s 0.3s;
  transition: top 0.3s, bottom 0.3s, opacity 0s 0.3s, -webkit-transform 0.3s 0.3s;
  transition: top 0.3s, bottom 0.3s, transform 0.3s 0.3s, opacity 0s 0.3s;
  transition: top 0.3s, bottom 0.3s, transform 0.3s 0.3s, opacity 0s 0.3s, -webkit-transform 0.3s 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .navbar-toggler[aria-expanded=true] .navbar-toggler-icon {
    -webkit-transition: none;
    transition: none;
  }
}

.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:before {
  top: 0;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:after {
  bottom: 0;
  opacity: 0;
}

Dropdown Menu Effect

.screen-darken {
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 10;
  opacity: 1;
  visibility: visible;
  position: fixed;
}

Avatar Design

.avatar {
  --avatar-size: 2.5rem;
  --avatar-bg: $dara;
  width: var(--avatar-size);
  height: var(--avatar-size);
  font-size: var(--avatar-size)/2.85714;
  font-weight: 500;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #ccc;
  text-align: center;
  text-transform: uppercase;
  vertical-align: bottom;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: var(--avatar-bg) no-repeat/cover;
  border-radius: 4px;
}

.avatar-sm {
  --avatar-size: 2rem;
}

Search bar Icon

.input-icon {
  position: relative;
}

.input-icon .form-control:not(:last-child),
.input-icon .form-select:not(:last-child) {
  padding-right: 2.5rem;
}

.input-icon .form-control:not(:first-child),
.input-icon .form-select:not(:first-child) {
  padding-left: 2.5rem;
}

.input-icon-addon {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 2.5rem;
  color: #1e293b;
  pointer-events: none;
  font-size: 1.2;
}

.input-icon-addon:last-child {
  right: 0;
  left: auto;
}

JavaScript Code:

Dim the screen on menu item active and focus on dropdown. when user activates some dropdown and rest screen becomes dark to keep user’s focus on active dropdown. In other word: dim the screen on active submenu or megamenu. So, how to darken the rest of page behind the dropdown menu? It is very simple.

document.addEventListener("DOMContentLoaded", function(){
    document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown){
      everydropdown.addEventListener('shown.bs.dropdown', function () {
          el_overlay = document.createElement('span');
          el_overlay.className = 'screen-darken';
          document.body.appendChild(el_overlay)
      });
  
      everydropdown.addEventListener('hide.bs.dropdown', function () {
        document.body.removeChild(document.querySelector('.screen-darken'));
      });
    });
  
  }); 
  // DOMContentLoaded  end
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply