Create fully responsive Offcanvas menu section using Bootstrap 5


Author:musayazlik
Official Page:Go to website
Last Update:June 11, 2021
License:MIT

Responsive Offcanvas Menu For Bootstrap 5

Description:

Previously, you must have written a lot of codes in order to create a responsive Offcanvas menu bar for your project. And now, Bootstrap came in the picture and things are being easy day by day. Here, I’m going to share with you an example, you can create responsive Offcanvas menu very easily. It does combines the Offcanvas and navbar menu that come with Bootstrap 5.

How can I use it?

First of all, you’ll need to include Bootstrap 5 framework in your page. Either you can use CDN or you can use the same included in this example project. And iclude it under <HEAD> tag.

<link rel = 'stylesheet' href = 'css/bootstrap.min.css'>
<script src = 'js/bootstrap.bundle.min.js'></script>

And then, write the HTML tags:

<nav class = 'navbar navbar-expand-lg navbar-light bg-danger'>
  <div class = 'container'>
    <a class = 'navbar-brand text-white' href = '#'>Navbar</a>
    <button class = 'btn btn-danger navbar-toggler border-3 px-2' type = 'button' data-bs-toggle = 'offcanvas' data-bs-target = '#offcanvasExample' aria-controls = 'offcanvasExample'>
      <img style = 'width: 30px' src = 'image/text-center.svg' alt = 'menu icon'>
    </button>
    <div class = 'offcanvas offcanvas-start-lg bg-danger' tabindex = '-1' id = 'offcanvasExample'aria-labelledby = 'offcanvasExampleLabel'>
      <div class = 'offcanvas-header d-flex d-lg-none'>
        <h5 class = 'offcanvas-title text-white' id = 'offcanvasExampleLabel'>Navbar</h5>
        <a href='javascript:void(0) ' class = 'text-reset p-0' data-bs-dismiss = 'offcanvas' aria-label = 'close'>
          <svg xmlns = 'http://www.w3.org/2000/svg'
               width = '24'
               height = '24'
               fill = '#FFFFFF'
               class = 'bi bi-x-circle'
               viewBox = '0 0 16 16'
          >
            <path d = 'M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/>
            <path d = 'M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/>
          </svg>
        </a>
      </div>
      <div class = 'offcanvas-body p-lg-0'>
        <ul class = 'navbar-nav'>
          <li class = 'nav-item'>
            <a class = 'nav-link active' aria-current = 'page' href = '#'>Home</a>
          </li>
          <li class = 'nav-item'>
            <a class = 'nav-link active' aria-current = 'page' href = '#'>About</a>
          </li>
          <li class = 'nav-item'>
            <a class = 'nav-link active' aria-current = 'page' href = '#'>Skills</a>
          </li>
          <li class = 'nav-item'>
            <a class = 'nav-link active' aria-current = 'page' href = '#'>Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

And finally, create a <style> tag or just a .css file and put the CSS into it.

@media (min-width : 992px) {
  .offcanvas {
    visibility      : visible;
    position        : relative;
    background      : none;
    border          : none;
    justify-content : end;
    color           : red;
  }
}

@media (max-width : 992px) {
  .offcanvas {
    width : 250px !important;
  }

  .offcanvas-start-lg {
    top          : 0;
    left         : 0;
    border-right : 1px solid rgba(0, 0, 0, .2);
    transform    : translateX(-100%);
  }

}

.navbar-nav li a {
color: white !important;
}