Web Designer Wall

Snippets Dropdown

Bootstrap 5 Responsive Navbar with Dropdown Menus

A responsive navigation bar with mega-style and simple dropdown menus that collapse into a mobile toggle, plus a prominent call-to-action button.

Bootstrap 5 No jQuery Apr 2020 2.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1000px">
    <div class="wdw-card position-relative">
      <nav class="navbar navbar-expand-lg px-3 px-lg-4 py-3" aria-label="Main">
        <a class="navbar-brand fw-bolder d-flex align-items-center gap-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="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5 9-5ZM3 13l9 5 9-5"/></svg></span>Stackly</a>
        <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="mainNav">
          <ul class="navbar-nav mx-lg-auto gap-lg-1">
            <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
            <li class="nav-item dropdown position-lg-static" id="megaItem">
              <a class="nav-link dropdown-toggle" href="#" id="ddProducts" role="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">Products</a>
              <div class="dropdown-menu mega p-3 p-lg-4" aria-labelledby="ddProducts">
                <div class="row g-2">
                  <div class="col-lg-6"><a class="dropdown-item d-flex gap-3 rounded-3 p-2 align-items-center" href="#" style="min-height:44px"><span class="wdw-icon"><svg width="20" height="20" 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 20V10M10 20V4M16 20v-7M22 20H2"/></svg></span><span><span class="d-block fw-semibold">Analytics</span><span class="d-block small wdw-muted text-wrap">Track growth in real time</span></span></a></div>
                  <div class="col-lg-6"><a class="dropdown-item d-flex gap-3 rounded-3 p-2 align-items-center" href="#" style="min-height:44px"><span class="wdw-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span><span class="d-block fw-semibold">Engage</span><span class="d-block small wdw-muted text-wrap">Email and in-app messages</span></span></a></div>
                  <div class="col-lg-6"><a class="dropdown-item d-flex gap-3 rounded-3 p-2 align-items-center" href="#" style="min-height:44px"><span class="wdw-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M6 15h4"/></svg></span><span><span class="d-block fw-semibold">Payments</span><span class="d-block small wdw-muted text-wrap">Checkout without friction</span></span></a></div>
                  <div class="col-lg-6"><a class="dropdown-item d-flex gap-3 rounded-3 p-2 align-items-center" href="#" style="min-height:44px"><span class="wdw-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></svg></span><span><span class="d-block fw-semibold">Automations</span><span class="d-block small wdw-muted text-wrap">Workflows that run themselves</span></span></a></div>
                </div>
                <div class="wdw-aurora rounded-4 p-3 mt-3 d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-2 overflow-hidden">
                  <div><div class="fw-bold">New: Stackly Studio</div><div class="small opacity-75">Build dashboards with drag and drop.</div></div>
                  <a href="#" class="btn btn-light btn-sm rounded-pill px-3 flex-shrink-0">Take the tour</a>
                </div>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="ddServices" role="button" data-bs-toggle="dropdown" aria-expanded="false">Services</a>
              <ul class="dropdown-menu p-2" aria-labelledby="ddServices">
                <li><a class="dropdown-item rounded-3 d-flex align-items-center" style="min-height:44px" href="#">Consulting</a></li>
                <li><a class="dropdown-item rounded-3 d-flex align-items-center" style="min-height:44px" href="#">Implementation</a></li>
                <li><a class="dropdown-item rounded-3 d-flex align-items-center" style="min-height:44px" href="#">Support plans</a></li>
              </ul>
            </li>
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
          </ul>
          <a href="#" class="btn btn-primary rounded-pill px-4 mt-3 mt-lg-0">Get started</a>
        </div>
      </nav>
      <div class="border-top p-4 p-md-5 bg-body-tertiary menu-body d-flex flex-column justify-content-end">
        <span class="wdw-eyebrow">Product analytics</span>
        <h1 class="wdw-heading display-6 mt-1 mb-2">Everything your team needs to grow.</h1>
        <p class="wdw-muted mb-4" style="max-width:34rem">Analytics, messaging and payments in one calm workspace, so every decision starts from the same numbers.</p>
        <div class="d-flex flex-wrap gap-2"><a href="#" class="btn btn-primary rounded-pill px-4">Start free trial</a><a href="#" class="btn btn-outline-secondary rounded-pill px-4">Book a demo</a></div>
      </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 dropdown snippets