Offcanvas Mobile Menu
Preview
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar bg-light"> <div class="container"> <button class="btn btn-outline-primary" data-bs-toggle="offcanvas" data-bs-target="#menuCanvas"> Menu </button> </div> </nav> <div class="offcanvas offcanvas-start" id="menuCanvas"> <div class="offcanvas-header"> <h5 class="offcanvas-title">Navigation</h5> <button class="btn-close" data-bs-dismiss="offcanvas"></button> </div> <div class="offcanvas-body"> <ul class="nav flex-column"> <li class="nav-item"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Docs</a></li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Basic Offcanvas