Web Designer Wall

Snippets Animation

Bootstrap 5 Navbar with Animated Dropdown Menus

A floating glass navbar over a gradient hero, with rich icon dropdown menus that glide in on hover or click and collapse into a mobile menu.

Bootstrap 5 No jQuery Oct 2020 2.2K views 

<header class="nb-hero wdw-aurora d-flex flex-column">
  <div class="container pt-3 pt-lg-4" style="max-width: 1080px">
    <nav class="navbar navbar-expand-lg nb-bar rounded-pill px-3 px-lg-4 py-2" data-bs-theme="dark" aria-label="Main">
      <a href="#" class="navbar-brand fw-bold d-flex align-items-center gap-2 me-4">
        <span class="nb-mark" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18 12 4l8 14H4Z"/></svg></span>
        Northwind
      </a>
      <button type="button" class="navbar-toggler border-0 shadow-none" data-bs-toggle="collapse" data-bs-target="#nbMain" aria-controls="nbMain" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
      <div id="nbMain" class="collapse navbar-collapse">
        <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-1 pt-3 pt-lg-0">
          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About us</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Services</a>
            <ul class="dropdown-menu nb-menu">
              <li><a class="dropdown-item" href="#"><i class="bi bi-palette"></i><span><b>Brand design</b><small>Identity and guidelines</small></span></a></li>
              <li><a class="dropdown-item" href="#"><i class="bi bi-code-slash"></i><span><b>Web development</b><small>Fast, accessible sites</small></span></a></li>
              <li><a class="dropdown-item" href="#"><i class="bi bi-graph-up-arrow"></i><span><b>Growth strategy</b><small>SEO and analytics</small></span></a></li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
            <ul class="dropdown-menu nb-menu">
              <li><a class="dropdown-item" href="#"><i class="bi bi-grid"></i><span><b>All projects</b><small>Browse every case study</small></span></a></li>
              <li><a class="dropdown-item" href="#"><i class="bi bi-bag"></i><span><b>E-commerce</b><small>Stores that convert</small></span></a></li>
              <li><a class="dropdown-item" href="#"><i class="bi bi-phone"></i><span><b>Mobile apps</b><small>iOS and Android</small></span></a></li>
              <li><a class="dropdown-item" href="#"><i class="bi bi-bar-chart"></i><span><b>Dashboards</b><small>Data made clear</small></span></a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
          <li class="nav-item ms-lg-2 mt-2 mt-lg-0"><a class="btn btn-light btn-sm rounded-pill px-3" href="#">Get started</a></li>
        </ul>
      </div>
    </nav>
  </div>

  <div class="container flex-grow-1 d-flex align-items-center justify-content-center text-center py-5" style="max-width: 760px">
    <div>
      <span class="badge rounded-pill nb-pill mb-3">New: dropdowns that actually feel good</span>
      <h1 class="display-4 fw-bold mb-3" style="letter-spacing:-.03em">A navbar with animated dropdowns</h1>
      <p class="lead mb-4 opacity-75">Open Services or Portfolio. Menus fade and glide into place, respect reduced motion and collapse cleanly on phones.</p>
      <a href="#" class="btn btn-light rounded-pill px-4">Learn more</a>
    </div>
  </div>
</header>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More animation snippets