Create cool Bootstrap 5 multilabel navbar With toggle effect

RH Suman
June 20, 2022

49

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:

Tags

Bootstrap HTML CSS JavaScript Navbar Menu Multilabel toggle effect

Subscribe

Get Updates

Subscribe our newsletter to get the last update into your inbox!

Please insert email address.

Recommended Posts