Web Designer Wall

Snippets Navbar

Bootstrap 5 Navbar with User Dropdown

A responsive app navbar for a signed-in user with pill links, an unread badge, search and a profile dropdown that collapses on mobile.

Bootstrap 5 No jQuery Jun 2019 9.7K views 

<section class="nb-section wdw-stage">
  <div class="container-xl">
    <nav class="navbar navbar-expand-lg wdw-card nb-bar py-2 px-2 px-lg-3" aria-label="Main navigation">
      <div class="container-fluid px-1 px-lg-0">
        <a class="navbar-brand d-flex align-items-center gap-2 fw-bold" href="#">
          <span class="nb-logo d-inline-grid rounded-3 bg-primary text-white" aria-hidden="true">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m3 12 9-9 9 9M5 10v10h14V10"/></svg>
          </span>
          Northwind
        </a>
        <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#nbMenu" aria-controls="nbMenu" aria-expanded="true" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse show" id="nbMenu">
          <ul class="navbar-nav me-auto gap-lg-1 mt-3 mt-lg-0">
            <li class="nav-item"><a class="nav-link active rounded-pill px-3" aria-current="page" href="#">Dashboard</a></li>
            <li class="nav-item"><a class="nav-link rounded-pill px-3" href="#">Projects</a></li>
            <li class="nav-item"><a class="nav-link rounded-pill px-3" href="#">Messages <span class="badge rounded-pill text-bg-danger ms-1">3</span></a></li>
            <li class="nav-item"><a class="nav-link rounded-pill px-3" href="#">Settings</a></li>
          </ul>
          <div class="d-flex flex-column flex-lg-row align-items-lg-center gap-3 mt-3 mt-lg-0">
            <form class="position-relative" role="search">
              <svg class="nb-search-ico" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
              <input type="search" class="form-control form-control-sm rounded-pill nb-search" placeholder="Search" aria-label="Search projects">
            </form>
            <div class="dropdown">
              <button class="btn d-flex align-items-center gap-2 p-1 pe-3 rounded-pill border bg-body" type="button" id="nbUser" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="https://i.pravatar.cc/64?img=32" width="32" height="32" class="rounded-circle" alt="">
                <span class="small fw-semibold">Maya Chen</span>
              </button>
              <ul class="dropdown-menu dropdown-menu-end border-0 p-2 nb-menu" aria-labelledby="nbUser">
                <li class="px-3 py-2"><div class="small fw-semibold">Maya Chen</div><div class="small text-body-secondary">[email protected]</div></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item rounded-2 d-flex align-items-center gap-2" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="flex-shrink-0"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg> My account</a></li>
                <li><a class="dropdown-item rounded-2 d-flex align-items-center gap-2" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="flex-shrink-0"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg> Billing</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item rounded-2 text-danger d-flex align-items-center gap-2" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="flex-shrink-0"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg> Log out</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <div class="row g-4 mt-1 mt-lg-3">
      <div class="col-lg-8">
        <span class="wdw-eyebrow mb-1">Welcome back</span>
        <h1 class="wdw-heading h3 mb-3">Good morning, Maya</h1>
        <div class="row g-3 mb-3">
          <div class="col-sm-4"><div class="wdw-card-sm p-3 h-100"><p class="small text-body-secondary mb-1">Active projects</p><p class="h3 wdw-heading mb-1">12</p><p class="small mb-0 text-success">+2 this week</p></div></div>
          <div class="col-sm-4"><div class="wdw-card-sm p-3 h-100"><p class="small text-body-secondary mb-1">Open tasks</p><p class="h3 wdw-heading mb-1">48</p><p class="small mb-0 text-body-secondary">8 due today</p></div></div>
          <div class="col-sm-4"><div class="wdw-card-sm p-3 h-100"><p class="small text-body-secondary mb-1">Team velocity</p><p class="h3 wdw-heading mb-1">94%</p><p class="small mb-0 text-success">+6% vs last sprint</p></div></div>
        </div>
        <div class="wdw-card-sm">
          <ul class="list-group list-group-flush rounded-4">
            <li class="list-group-item bg-transparent px-4 py-3 d-flex justify-content-between"><span>Design review approved</span><span class="small text-body-secondary">2h ago</span></li>
            <li class="list-group-item bg-transparent px-4 py-3 d-flex justify-content-between"><span>3 unread messages</span><span class="small text-body-secondary">5h ago</span></li>
          </ul>
        </div>
      </div>
      <div class="col-lg-4"></div>
    </div>
  </div>
</section>

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

Free to use in personal and commercial projects under the MIT license.

Related snippets

More navbar snippets