DeshAmarBD
Home » Web Design » Create cool Bootstrap 5 multilabel navbar With toggle effect

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

Add comment

Leave a Reply

AdBlocker Message

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.