Create cool Bootstrap 5 multilabel navbar With toggle effect

Latest

Create JavaScript Age Calculator

Create Flickity touch responsive news ticker

Create jQuery Accordion Menu

Responsive user profile card with social media and contact Form

Get Current Date and Time in JavaScript

How To Build Button Hover Animation with HTML & CSS

Mouse cursor effects JavaScript with cool hover effect

Programming a real-time Clock using JavaScript

Create easy PHP MySQL Registration and Login System

Web Design

Create cool Bootstrap 5 multilabel navbar With toggle effect

RH Suman

June 20, 2022

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.

Create cool Bootstrap 5 multilabel navbar With toggle effect

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

Preview:

See the Pen <a href="https://codepen.io/rhsuman/pen/poaObmB"> Cool Bootstrap multilabel navbar</a> by Rashedul Hasan (<a href="https://codepen.io/rhsuman">@rhsuman</a>) on <a href="https://codepen.io">CodePen</a>.