Web Designer Wall

Snippets Dropdown

Bootstrap 5 Navbar with Login Form in Dropdown

A responsive navbar with brand, a services dropdown, pill search field and a login button that opens a floating sign-in form.

Bootstrap 5 No jQuery Sep 2020 2.1K views 

<section class="wdw-stage align-items-start">
  <div class="container" style="max-width: 1080px">
    <nav class="navbar navbar-expand-lg wdw-card-sm px-3 px-lg-4 py-2 nb-bar">
      <a href="#" class="navbar-brand fw-bolder d-flex align-items-center gap-2 me-lg-4">
        <span class="nb-mark bg-primary text-white" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18l5-12 4 8 3-5 4 9"/></svg></span><span>Brand<span class="text-primary">Name</span></span>
      </a>
      <button type="button" class="navbar-toggler border-0" aria-label="Toggle navigation" aria-controls="nbCollapse" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#nbCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div id="nbCollapse" class="collapse navbar-collapse">
        <ul class="navbar-nav me-lg-auto gap-lg-1">
          <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
          <li class="nav-item"><a href="#" class="nav-link">About</a></li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Services</a>
            <ul class="dropdown-menu p-2">
              <li><a href="#" class="dropdown-item rounded-3">Web design</a></li>
              <li><a href="#" class="dropdown-item rounded-3">Web development</a></li>
              <li><a href="#" class="dropdown-item rounded-3">Graphic design</a></li>
              <li><a href="#" class="dropdown-item rounded-3">Digital marketing</a></li>
            </ul>
          </li>
          <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Pricing</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
        </ul>
        <form class="d-flex my-2 my-lg-0 ms-lg-3 me-lg-3" role="search">
          <label for="nbSearch" class="visually-hidden">Search</label>
          <div class="input-group nb-search">
            <span class="input-group-text border-0 bg-body-tertiary ps-3 pe-1" aria-hidden="true">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
            </span>
            <input id="nbSearch" type="search" class="form-control border-0 bg-body-tertiary ps-2" placeholder="Search">
          </div>
        </form>
        <div class="dropdown d-grid d-lg-block">
          <button type="button" class="btn btn-primary rounded-pill px-4 text-nowrap" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" id="nbLoginBtn">Log in</button>
          <div class="dropdown-menu dropdown-menu-lg-end p-4 nb-login" aria-labelledby="nbLoginBtn">
            <h2 class="h6 fw-bold mb-3">Welcome back</h2>
            <form action="#" id="nbLogin">
              <div class="form-floating mb-2">
                <input type="email" class="form-control" id="nbEmail" placeholder="Email" required>
                <label for="nbEmail">Email</label>
              </div>
              <div class="form-floating mb-3">
                <input type="password" class="form-control" id="nbPass" placeholder="Password" required>
                <label for="nbPass">Password</label>
              </div>
              <div class="d-flex justify-content-between align-items-center mb-3 small">
                <div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="nbRemember"><label class="form-check-label" for="nbRemember">Remember me</label></div>
                <a href="#" class="link-primary">Forgot?</a>
              </div>
              <button type="submit" class="btn btn-primary rounded-pill w-100">Log in</button>
            </form>
            <p class="small wdw-muted text-center mt-3 mb-0">New here? <a href="#" class="fw-semibold">Create an account</a></p>
          </div>
        </div>
      </div>
    </nav>

    <div class="nb-hero text-center mx-auto pt-5 mt-5 pb-4">
      <span class="wdw-eyebrow">Pricing</span>
      <h1 class="wdw-heading display-5 mt-2 mb-3">Plans that grow with your team</h1>
      <p class="wdw-muted fs-5 mb-4">Start free and upgrade when you are ready. Every plan includes unlimited projects and email support.</p>
      <div class="d-flex gap-2 justify-content-center">
        <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">Compare plans</a>
      </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