Bootstrap 5 Off Canvas Missing CSS/Js

Bootstrap 5 Off-Canvas left to right

If you're just looking to have the menu slide in from the left instead of from the right, changing .offcanvas-collapse from left: 100% to right: 100% and .offcanvas-collapse.open from transform: translateX(-100%); to 100% (no minus) should do what you need.

(function() {
    'use strict'

    document.querySelector('#navbarSideCollapse').addEventListener('click', function() {
        document.querySelector('.offcanvas-collapse').classList.toggle('open')
    })
})()

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

<style>
    @media (max-width: 991.98px) {
        .offcanvas-collapse {
            position: fixed;
            top: 56px;
            /* Height of navbar */
            bottom: 0;
            right: 100%;
            width: 100%;
            padding-right: 1rem;
            padding-left: 1rem;
            overflow-y: auto;
            visibility: hidden;
            background-color: #343a40;
            transition: transform .3s ease-in-out, visibility .3s ease-in-out;
        }

        .offcanvas-collapse.open {
            visibility: visible;
            transform: translateX(100%);
        }
    }
</style>

<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Offcanvas navbar</a>
        <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Notifications</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Switch account</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Settings</a>
                    <ul class="dropdown-menu" aria-labelledby="dropdown01">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

How to change bootstrap 5 default menu to off-canvas menu?

Bootstrap 5 Beta 3 (update 2021)

Introducing the new Bootstrap 5 Offcanvas Component

Bootstrap 5 Beta 2 (original answer)

Off-canvas menus are not an official Bootstrap component, but you can create one by using this "experimental" template as an example. You'll see that it requires additional CSS and JS.

Bootstrap 5 offcanvas is not working with images or icons inside the anchor

This is a known issue in beta-3 that will be resolved in the 5.0.0 release.

The workaround is to use data-bs-toggle="offcanvas" on the inner element...

  <a class="btn float-start d-inline offcanvas_btn" href="#sidebar_left" role="button" aria-controls="sidebar_left">
      <img src="https://www.bylde.com/assets/img/bylde-logo-small.webp?v=B01234567" style="width: 30px" data-bs-target="#sidebar_left" data-bs-toggle="offcanvas" class="img-fluid hlogo rounded">
  </a>

Demo

Bootstrap offcanvas height to content

Add h-auto to offcanvas element.

.cursor-pointer {
  cursor: pointer;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet"/>
<button class="btn btn-primary m-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom h-auto" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-body p-0 h-50">
    <ul class="list-unstyled m-0 fs-5">
      <li class="bg-danger text-light px-3 py-2">
        <i class="bi bi-trash"></i>
        Delete
      </li>
      <li class="bg-primary text-light px-3 py-2">
        <i class="bi bi-pin"></i>
        Pin
      </li>
    </ul>
  </div>
</div>

Bootstrap 5 offcanvas scrolls back to top on close

It is solved. The button should not use data-bs-toggle="offcanvas".
If you make a on click handler for the button that toggles the offcanvas with the javascript functions of bootstrap it all works.

Here is my code

document.addEventListener("DOMContentLoaded", function(){
  var myOffcanvas = document.getElementById('offcanvasExample');
  var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
  document.getElementById("OpenMenu").addEventListener('click',function (e){
    e.preventDefault();
    e.stopPropagation();
    bsOffcanvas.toggle();
  });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- the Offcanvas button //-->
<button class="nav-link btn btn-outline-primary" id="OpenMenu">open</button>

<!-- the Offcanvas element //-->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title text-primary" id="offcanvasExampleLabel">Test</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<a href="#test">test</a>
</div>
</div>
<div class="my-5 py-5">
Test content
</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5"><a name="test" id="test">Scroll here</a></div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>

---

Related Topics