Crear Offcanvas con Bootstrap 5

El elemento Offcanvas de Bootstrap 5 abre una ventana por cualquiera de los lados, arriba, abajo, izquierda derecha, donde se puede mostrar contenido, alertas, ayuda, menus etc.

El componente Offcanvas funciona similar a los Modales, al momento de abrir un offcanvas aparece un overlay de color gris oscuro sobre el resto del contenido para resaltar el offcanvas y su contenido.

El offcanvas se puede cerrar con el boton de cerrar propio del offcanvas o haciendo click fuera, en el overlay.

Codigo

Este es el codigo para un Offcavas normal.

<!-- BOTON PARA ABRIR EL OFFCANVAS -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Abrir Offcanvas
</button>

<!-- INICIA OFFCANVAS -->
<div class="offcanvas offcanvas-end " tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <!-- CONTENIDO AQUI -->
    <div>
      Contenido, aqui se puede mostrar texto, listas, imagenes, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Opciones
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Opcion 1</a></li>
        <li><a class="dropdown-item" href="#">Opcion 2</a></li>
        <li><a class="dropdown-item" href="#">Opcion 3</a></li>
      </ul>
    </div>

    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
    <!-- TERMINA CONTENIDO -->
  </div>
</div>
<!-- TERMINA OFFCANVAS -->

En la declaracion del offcanvas.

Se puede cambiar la direccion de donde se muestra el offcanvas cambiando el parametro “offcanvas-end”, los valores posibles son:

• offcanvas-start
• offcanvas-end
• offcanvas-top
• offcanvas-bottom

Tambien es posible crear un offcanvas con color dark u obscuro usando la clase

• text-bg-dark

Resultado

El resultado de un offcanvas es el siguiente.