Bootstrap 5 · Responsive Bootstrap Navbar

Intermediate

Requires Bootstrap 5. Add the CDN tags below to your page (styles in <head>, scripts before </body>). The downloaded file already includes them.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

A responsive collapsing Bootstrap 5 navbar with brand, links and a CTA button. Free to copy or download.

<nav class="navbar navbar-expand-lg bg-dark navbar-dark rounded-3 px-3" style="width:520px;max-width:100%">
  <a class="navbar-brand fw-bold" href="#">Acme</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nv"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="nv">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
      <li class="nav-item"><a class="btn btn-primary btn-sm ms-lg-2" href="#">Sign up</a></li>
    </ul>
  </div>
</nav>

Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.