Web Designer Wall

Snippets Menu

Bootstrap 5 Navbar with Dropdown and Sub-menu

A responsive site header with a collapsing mobile menu, a Services dropdown with icon items and an expandable sub-menu, and a call-to-action button.

Bootstrap 5 No jQuery Nov 2019 2.2K views 

<section class="wdw-stage align-items-start align-items-lg-center">
  <div class="container" style="max-width: 1040px">
    <div class="wdw-card nv-frame">
      <nav class="navbar navbar-expand-lg px-3 px-lg-4 py-3" aria-label="Main">
        <a class="navbar-brand d-flex align-items-center gap-2 fw-bold wdw-heading fs-5 me-4" href="#">
          <span class="wdw-icon" style="width:2.25rem;height:2.25rem;border-radius:.7rem">
            <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 2 3 7l9 5 9-5-9-5Z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/></svg>
          </span>
          Wrapkit
        </a>
        <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#nvMenu" aria-controls="nvMenu" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="nvMenu">
          <ul class="navbar-nav ms-lg-auto align-items-lg-center gap-lg-1 mt-3 mt-lg-0">
            <li class="nav-item"><a class="nav-link nv-link active" aria-current="page" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link nv-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link nv-link" href="#">Work</a></li>
            <li class="nav-item dropdown">
              <a class="nav-link nv-link dropdown-toggle" href="#" id="nvServices" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Services</a>
              <ul class="dropdown-menu nv-menu p-2 border-0" aria-labelledby="nvServices">
                <li><a class="dropdown-item rounded-3 d-flex gap-3 align-items-start py-2" href="#">
                  <span class="wdw-icon flex-none" style="width:2.25rem;height:2.25rem"><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"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg></span>
                  <span><span class="d-block fw-semibold">Web development</span><span class="d-block small text-body-secondary text-wrap">Fast, accessible sites</span></span></a></li>
                <li><a class="dropdown-item rounded-3 d-flex gap-3 align-items-start py-2" href="#">
                  <span class="wdw-icon flex-none" style="width:2.25rem;height:2.25rem"><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"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg></span>
                  <span><span class="d-block fw-semibold">Brand design</span><span class="d-block small text-body-secondary text-wrap">Identity and guidelines</span></span></a></li>
                <li><hr class="dropdown-divider"></li>
                <li>
                  <button class="dropdown-item rounded-3 d-flex justify-content-between align-items-center nv-sub-toggle" type="button" aria-expanded="false" aria-controls="nvSub">
                    More resources
                    <svg class="nv-chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
                  </button>
                  <ul class="list-unstyled nv-sub mb-0" id="nvSub" hidden>
                    <li><a class="dropdown-item rounded-3 ps-4" href="#">Case studies</a></li>
                    <li><a class="dropdown-item rounded-3 ps-4" href="#">Pricing guide</a></li>
                    <li><a class="dropdown-item rounded-3 ps-4" href="#">Style guide</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="nav-item"><a class="nav-link nv-link" href="#">Freebies</a></li>
            <li class="nav-item ms-lg-2 mt-2 mt-lg-0"><a class="btn btn-primary rounded-pill px-4" href="#">Hire me</a></li>
          </ul>
        </div>
      </nav>
      <div class="nv-hero border-top p-4 p-lg-5 bg-body-tertiary">
        <span class="wdw-eyebrow mb-2">Portfolio</span>
        <h1 class="wdw-heading display-6 mb-2">Design that earns attention.</h1>
        <p class="wdw-muted mb-0" style="max-width:34rem">Open the Services menu to see a dropdown with an expandable sub-menu that works on touch, keyboard and mouse.</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 menu snippets