Offcanvas

<< Accordion Placeholder >>

Este componente nos permite ocultar información como son las barras de navegación.

Offcanvas es un componente sidebar que puede mediante JS aparecer por la izquierda/derecha/arriba o abajo del viewport. La animación de este componente es dependiente de las preferencias prefers-reduced-motion.

Offcanvas components

Si queremos que el offcanvas se muestre por defecto, debemos tener puesta la clase .show en el .offcanvas. Este componente incluye un botón de cerrar.

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

Ejemplo de offcanvas

En este ejemplo el offcanvas se mostrará usando dos botones (un enlace y un botón). En ambos casos debemos tener en cuenta que debemos poner el atributo data-bs-toggle="offcanvas", además de tener en cuenta que cuando queramos que se muestre el contenido deberemos tener las clases .offcanvas.show y si no queremos mostrar el contenido dejaremos sólo .offcanvas

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" 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">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>
    </div>
  </div>
</div>

Placement

Si queremos modificar por defecto el offcanvas y que aparezca por la derecha por ejemplo, debemos indicarle a la clase .offcanvas el por dónde aparecer del viewport, es decir, .offcanvas-start(left), .offcanvas-end(right), .offcanvas-top(arriba), .offcanvas-bottom(abajo)

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

<< Accordion Placeholder >>