Web Designer Wall

Snippets Buttons

Bootstrap 5 Full Screen Navigation Menu

A full-screen overlay menu that slides down from the top with large numbered links and a newsletter field.

Bootstrap 5 No jQuery Mar 2020 2K views 

<header class="wdw-fsnav-bar">
  <div class="container d-flex align-items-center justify-content-between py-3">
    <a href="#" class="fw-bold fs-5 text-body-emphasis text-decoration-none">Northwind</a>
    <button type="button" class="btn btn-outline-primary rounded-pill px-4" id="fsNavToggle" data-bs-toggle="offcanvas" data-bs-target="#fsNav" aria-controls="fsNav">Menu</button>
  </div>
</header>

<main class="wdw-stage wdw-fsnav-page">
  <div class="container text-center" style="max-width: 40rem;">
    <span class="wdw-eyebrow mb-2">Full-screen navigation</span>
    <h1 class="wdw-heading display-6 mb-3">A menu that takes the whole stage</h1>
    <p class="wdw-muted mb-0">Open the menu to slide a full-screen overlay down from the top. Esc or the close button brings you back.</p>
  </div>
</main>

<div class="offcanvas offcanvas-top h-100 wdw-aurora wdw-fsnav border-0" tabindex="-1" id="fsNav" data-bs-backdrop="false" aria-labelledby="fsNavLabel">
  <div class="offcanvas-header container pt-3">
    <h2 class="offcanvas-title fs-5 fw-bold" id="fsNavLabel">Northwind</h2>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close menu"></button>
  </div>
  <div class="offcanvas-body container d-flex flex-column justify-content-between gap-4">
    <nav aria-label="Main">
      <ul class="list-unstyled mb-0 wdw-fsnav-list">
        <li><a href="#"><span>01</span>Work<small>What we have shipped</small></a></li>
        <li><a href="#"><span>02</span>Services<small>Design, UX and build</small></a></li>
        <li><a href="#"><span>03</span>Team<small>Meet the people</small></a></li>
        <li><a href="#"><span>04</span>Careers<small>Join the family</small></a></li>
        <li><a href="#"><span>05</span>Contact<small>Say hello</small></a></li>
      </ul>
    </nav>
    <div class="row g-4 align-items-end">
    <div class="col-md-6 col-lg-5">
    <form class="wdw-fsnav-form" id="fsNavForm">
      <label for="fsNavEmail" class="small fw-semibold text-uppercase mb-2 d-block opacity-75">Subscribe to our newsletter</label>
      <div class="input-group">
        <input type="email" class="form-control border-0" id="fsNavEmail" placeholder="[email protected]" autocomplete="email" required>
        <button type="submit" class="btn btn-light px-4">Let me in</button>
      </div>
    </form>
    </div>
    <div class="col-md-6 col-lg-7 d-none d-md-flex justify-content-md-end">
      <div class="wdw-fsnav-aside text-md-end">
        <p class="small text-uppercase fw-semibold opacity-75 mb-2">Visit us</p>
        <p class="mb-3">12 Harbour Street<br>Lisbon, Portugal</p>
        <p class="mb-0 d-flex gap-3 justify-content-md-end"><a href="#">LinkedIn</a><a href="#">GitHub</a><a href="#">YouTube</a></p>
      </div>
    </div>
    </div>
  </div>
</div>

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

Related snippets

More buttons snippets