Web Designer Wall

Snippets Animation

Bootstrap 5 Offcanvas Full-Screen Navigation Menu

A full-screen hero with a Menu button that slides a large typographic navigation panel in from the left, with links that animate in one after another. Built on the Bootstrap offcanvas, so focus handling and the Escape key work out of the box.

Bootstrap 5 No jQuery Jun 2019 3.4K views 

<section class="canvas-hero wdw-aurora">
  <header class="position-relative z-2 p-3 p-md-4">
    <button class="btn btn-light rounded-pill canvas-menu-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#canvasNav" aria-controls="canvasNav">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h16"/></svg>
      Menu
    </button>
  </header>
  <div class="canvas-body position-relative z-2 container">
    <div class="row align-items-center g-5">
      <div class="col-lg-7 text-center text-lg-start">
        <span class="canvas-kicker">Festival 2026</span>
        <h1 class="canvas-title">Sound Canvas</h1>
        <p class="canvas-lead mx-auto mx-lg-0">Three days of live music in Lisbon. Open the menu and the whole page makes room for it.</p>
        <ul class="canvas-meta list-unstyled d-flex flex-wrap justify-content-center justify-content-lg-start gap-3 my-4">
          <li>14–16 August</li><li>Parque Eduardo VII, Lisbon</li>
        </ul>
        <a href="#" class="btn btn-light rounded-pill px-4 canvas-cta">Get tickets</a>
      </div>
      <div class="col-lg-5 d-none d-lg-block" aria-hidden="true">
        <div class="canvas-peek">
          <span class="wdw-eyebrow">Navigation</span>
          <ol class="list-unstyled m-0 mt-3">
            <li><small>01</small>Home</li><li><small>02</small>Line-up</li><li><small>03</small>Tickets</li><li><small>04</small>Venue</li><li><small>05</small>Contact</li>
          </ol>
        </div>
      </div>
    </div>
  </div>

  <div class="offcanvas offcanvas-start canvas-panel" tabindex="-1" id="canvasNav" aria-labelledby="canvasNavLabel" data-bs-theme="dark">
    <div class="offcanvas-header p-4 p-md-5 pb-0">
      <span class="wdw-eyebrow" id="canvasNavLabel">Navigation</span>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close menu"></button>
    </div>
    <div class="offcanvas-body p-4 p-md-5 d-flex flex-column justify-content-center">
      <nav aria-label="Main">
        <ol class="canvas-links list-unstyled m-0">
          <li style="--i:0"><a href="#"><small>01</small>Home</a></li>
          <li style="--i:1"><a href="#"><small>02</small>Line-up</a></li>
          <li style="--i:2"><a href="#"><small>03</small>Tickets</a></li>
          <li style="--i:3"><a href="#"><small>04</small>Venue</a></li>
          <li style="--i:4"><a href="#"><small>05</small>Contact</a></li>
        </ol>
      </nav>
    </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 animation snippets