Bootstrap 5 Hamburger Menu with Animations (2 Free Templates)

After learning how to create a hamburger menu in simple HTML/CSS and in Bootstrap 4, today I’ve created 2 templates of hamburger menus (dark and light) using the latest Bootstrap 5.

So, if you prefer to always be up-to-date with the Bootstrap front-end framework, these 2 templates may be useful for your projects.

I’ll show the code for one of them and in the end, you can live-preview them and download the templates. Enjoy!

1. Dark Hamburger Menu

Image Previews

Dark Hamburger Menu Closed:

Dark Hamburger Menu Opened:

The HTML Code (only for the menu)

<!-- Navbar - top navigation -->
<nav class="navbar fixed-top bg-dark azm-navbar" data-bs-theme="dark">
  <div class="container">
    <a class="navbar-brand" href="index.html">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span></span>
      <span></span>
      <span></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 text-center">
        <li class="nav-item">
          <a class="nav-link scroll-link" aria-current="page" href="#header">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link scroll-link" href="#section-1">Item 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link scroll-link" href="#section-2">Item 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link scroll-link" href="#section-3">Item 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link scroll-link" href="#section-4">Item 4</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

The CSS Code (only for the menu)

/* Navbar */
.navbar.bg-dark.azm-navbar {
  background-color: #3d3d3d !important;
  backface-visibility: hidden;
}

.navbar.bg-dark.azm-navbar .dropdown-menu {
  background-color: #3d3d3d;
}

.azm-navbar .navbar-brand {
  width: 162px;
  height: 50px;
  background: url(assets/logo.png) left center no-repeat;
  text-indent: -99999px;
}

.azm-navbar .nav-link {
  font-size: 1.15rem;
}

.azm-navbar .dropdown-menu {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.azm-navbar .navbar-toggler {
  border-color: #3d3d3d;
}

.azm-navbar .navbar-toggler:focus {
  background: none;
  outline: 0;
  box-shadow: none;
}

.azm-navbar .navbar-toggler span {
  display: block;
  width: 30px;
  height: 2px;
  margin: 6px auto;
  background: #888;
  transition: all .6s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}

.azm-navbar .navbar-toggler:hover span,
.azm-navbar .navbar-toggler:focus span {
  background: #fff;
}

/* rotate first span */
.azm-navbar .navbar-toggler[aria-expanded="true"] span:first-of-type {
  transform: rotate(45deg) translate(6px, 6px);
}

/* hide second span */
.azm-navbar .navbar-toggler[aria-expanded="true"] span:nth-of-type(2) {
  opacity: 0;
}

/* rotate third span */
.azm-navbar .navbar-toggler[aria-expanded="true"] span:last-of-type {
  transform: rotate(-45deg) translate(5px, -5px);
}

.azm-navbar .navbar-toggler[aria-expanded="false"] span {
  transform: none;
  opacity: 1;
}

2. Light Hamburger Menu

Image Previews

Light Hamburger Menu Closed:

Light Hamburger Menu Opened:

3. Demo and Download

LIVE PREVIEW: DARK – LIGHT

DOWNLOAD: