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.