Web Designer Wall

Snippets Bar

Bootstrap 5 Responsive Navbar with Dropdown and CTA

A responsive navigation bar with a brand mark, pill-style links, a dropdown and call-to-action buttons that collapses into a clean mobile menu.

Bootstrap 5 No jQuery Jun 2020 2.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1040px">
    <div class="wdw-announce d-flex align-items-center justify-content-center gap-2 text-center small fw-semibold mb-3">
      <span class="badge rounded-pill text-bg-primary">New</span>
      <span class="text-body-secondary">Northwind 2.0 is here — <a href="#" class="link-primary">see what changed</a></span>
    </div>

    <div class="wdw-navwrap">
    <nav class="navbar navbar-expand-lg wdw-nav wdw-card px-3 px-lg-4 py-2" aria-label="Main">
      <a class="navbar-brand d-flex align-items-center gap-2 fw-bold wdw-heading fs-5 mb-0" href="#">
        <span class="wdw-icon" style="width:2.25rem;height:2.25rem;border-radius:.65rem">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 8 4.5v9L12 21l-8-4.5v-9z"/><path d="M12 12 4 7.5M12 12l8-4.5M12 12v9"/></svg>
        </span>
        Northwind
      </a>
      <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#wdwNav" aria-controls="wdwNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="wdwNav">
        <ul class="navbar-nav mx-lg-auto gap-lg-1 py-3 py-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="#">Services</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Resources</a>
            <ul class="dropdown-menu wdw-menu p-2 border-0">
              <li><a class="dropdown-item d-flex align-items-start gap-3 rounded-3 p-2" href="#">
                <span class="wdw-icon" style="width:2.25rem;height:2.25rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="8.5" cy="10" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="15.5" cy="10" r="1"/><path d="M12 21c-1.5 0-2-1.5-1-2.5s0-2.5 2-2.5h3"/></svg></span>
                <span><span class="d-block fw-semibold text-body-emphasis">Colors</span><span class="d-block small text-body-secondary text-wrap">Palettes and ready-made tokens</span></span></a></li>
              <li><a class="dropdown-item d-flex align-items-start gap-3 rounded-3 p-2" href="#">
                <span class="wdw-icon" style="width:2.25rem;height:2.25rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></svg></span>
                <span><span class="d-block fw-semibold text-body-emphasis">Icons</span><span class="d-block small text-body-secondary text-wrap">1,200 crisp SVG icons</span></span></a></li>
              <li><a class="dropdown-item d-flex align-items-start gap-3 rounded-3 p-2" href="#">
                <span class="wdw-icon" style="width:2.25rem;height:2.25rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v16H6.5A2.5 2.5 0 0 0 4 21.5z"/><path d="M4 19V5.5"/></svg></span>
                <span><span class="d-block fw-semibold text-body-emphasis">Guides</span><span class="d-block small text-body-secondary text-wrap">Step-by-step tutorials</span></span></a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
        <div class="d-grid d-lg-flex gap-2 pb-3 pb-lg-0">
          <a class="btn btn-outline-primary rounded-pill px-4" href="#">Log in</a>
          <a class="btn btn-primary rounded-pill px-4" href="#">Get started</a>
        </div>
      </div>
    </nav>
    </div>

    <div class="wdw-hero wdw-aurora rounded-4 mt-3 p-4 p-md-5 text-center text-md-start">
      <div class="position-relative" style="max-width:560px">
        <span class="badge rounded-pill bg-white bg-opacity-25 mb-3">Responsive navigation</span>
        <h1 class="display-5 fw-bolder mb-3" style="letter-spacing:-.02em">A navigation bar that adapts to every screen</h1>
        <p class="fs-5 mb-0 text-white-50">Resize the window: links fold into a tidy menu below 992px, with a rich dropdown and a sticky bar that gains a shadow as you scroll.</p>
      </div>
    </div>
  </div>
</section>

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

Related snippets

More Bar snippets