Offcanvas

Offcanvas (Drawer)

<!-- Trigger -->
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#drawer">
    Open Sidebar
</button>

<!-- Offcanvas (start = left, end = right, top, bottom) -->
<div class="offcanvas offcanvas-start" id="drawer">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Sidebar Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <ul class="nav flex-column">
            <li><a class="nav-link" href="/">Home</a></li>
            <li><a class="nav-link" href="/products">Products</a></li>
        </ul>
    </div>
</div>

<!-- JS control -->
<script>
const offcanvas = new bootstrap.Offcanvas(document.getElementById("drawer"));
offcanvas.show();
offcanvas.hide();
</script>