Ver en GitHub

Offcanvas

Construye barras laterales ocultas en tu proyecto para navegación, carritos de compra y más con unas pocas clases y nuestro plugin de JavaScript.

On this page

Cómo funciona

Offcanvas es un componente de barra lateral que se puede conmutar vía JavaScript para aparecer desde el borde izquierdo, derecho o inferior del viewport. Los botones o anclas se usan como disparadores que se adjuntan a elementos específicos que conmutas, y los atributos data se usan para invocar nuestro JavaScript.

Offcanvas comparte parte del mismo código JavaScript que los modales. Conceptualmente, son bastante similares, pero son plugins independientes.
De manera similar, algunas variables de Sass de origen para los estilos y dimensiones de offcanvas se heredan de las variables del modal.
Cuando se muestra, offcanvas incluye un fondo por defecto que se puede clicar para ocultar el offcanvas.
Al igual que los modales, solo se puede mostrar un offcanvas a la vez.

¡Atención! Dado cómo CSS maneja las animaciones, no puedes usar margin o translate en un elemento .offcanvas. En su lugar, usa la clase como un elemento contenedor independiente.

El efecto de animación de este componente depende de la media query prefers-reduced-motion. Consulta la sección de movimiento reducido de nuestra documentación de accesibilidad.

Ejemplos

Componentes offcanvas

A continuación se muestra un ejemplo de offcanvas que se muestra por defecto (vía .show en .offcanvas). Offcanvas incluye soporte para un encabezado con un botón de cierre y una clase body opcional para algo de padding inicial. Sugerimos que incluyas encabezados offcanvas con acciones de cierre siempre que sea posible, o que proporciones una acción de cierre explícita.

El contenido para el offcanvas va aquí. Puedes colocar casi cualquier componente de Bootstrap o elementos personalizados aquí.

<div class="offcanvas offcanvas-start" 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 text-reset" 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>

Demo en vivo

Usa los botones a continuación para mostrar y ocultar un elemento offcanvas vía JavaScript que conmuta la clase .show en un elemento con la clase .offcanvas.

.offcanvas oculta contenido (por defecto)
.offcanvas.show muestra contenido

Puedes usar un enlace con el atributo href, o un botón con el atributo data-bs-target. En ambos casos, se requiere data-bs-toggle="offcanvas".

Enlace con href

Algún texto como marcador de posición. En la vida real puedes tener los elementos que hayas elegido. Como, texto, imágenes, listas, etc.

<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 text-reset" 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" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <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>

Ubicación

No hay ubicación por defecto para los componentes offcanvas, así que debes añadir una de las clases modificadoras de abajo;

.offcanvas-start coloca offcanvas a la izquierda del viewport (mostrado arriba)
.offcanvas-end coloca offcanvas a la derecha del viewport
.offcanvas-top coloca offcanvas en la parte superior del viewport
.offcanvas-bottom coloca offcanvas en la parte inferior del viewport

Prueba los ejemplos superior, derecho e inferior a continuación.

...

<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 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

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

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

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

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Fondo

El desplazamiento del elemento <body> se deshabilita cuando un offcanvas y su fondo son visibles. Usa el atributo data-bs-scroll para conmutar el desplazamiento del <body> y data-bs-backdrop para conmutar el fondo.

Prueba a desplazar el resto de la página para ver esta opción en acción.

.....

Prueba a desplazar el resto de la página para ver esta opción en acción.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

Accesibilidad

Dado que el panel offcanvas es conceptualmente un diálogo modal, asegúrate de añadir aria-labelledby="..."—haciendo referencia al título del offcanvas—a .offcanvas. Ten en cuenta que no necesitas añadir role="dialog" ya que lo añadimos vía JavaScript.

Sass

Variables

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;

Uso

El plugin offcanvas utiliza algunas clases y atributos para manejar el trabajo pesado:

.offcanvas oculta el contenido
.offcanvas.show muestra el contenido
.offcanvas-start oculta el offcanvas a la izquierda
.offcanvas-end oculta el offcanvas a la derecha
.offcanvas-bottom oculta el offcanvas en la parte inferior

Añade un botón de cierre con el atributo data-bs-dismiss="offcanvas", que activa la funcionalidad de JavaScript. Asegúrate de usar el elemento <button> con él para un comportamiento adecuado en todos los dispositivos.

A través de atributos data

Añade data-bs-toggle="offcanvas" y un data-bs-target o href al elemento para asignar automáticamente el control de un elemento offcanvas. El atributo data-bs-target acepta un selector CSS para aplicar el offcanvas. Asegúrate de añadir la clase offcanvas al elemento offcanvas. Si quieres que se abra por defecto, añade la clase adicional show.

A través de JavaScript

Habilita manualmente con:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Opciones

Las opciones se pueden pasar vía atributos data o JavaScript. Para los atributos data, añade el nombre de la opción a data-bs-, como en data-bs-backdrop="".

Nombre	Tipo	Predeterminado	Descripción
`backdrop`	boolean	`true`	Aplica un fondo sobre el body mientras el offcanvas está abierto
`keyboard`	boolean	`true`	Cierra el offcanvas cuando se presiona la tecla escape
`scroll`	boolean	`false`	Permite el desplazamiento del body mientras el offcanvas está abierto

Métodos

Métodos asíncronos y transiciones

Todos los métodos de la API son asíncronos e inician una transición. Vuelven al llamador tan pronto como se inicia la transición pero antes de que termine. Además, una llamada a un método en un componente en transición será ignorada.

Consulta nuestra documentación de JavaScript para más información.

Activa tu contenido como un elemento offcanvas. Acepta un objeto de opciones opcional.

Puedes crear una instancia de offcanvas con el constructor, por ejemplo:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Método	Descripción
`toggle`	Conmuta un elemento offcanvas a mostrado u oculto. Vuelve al llamador antes de que el elemento offcanvas se haya mostrado u ocultado realmente (es decir, antes de que ocurra el evento `shown.bs.offcanvas` o `hidden.bs.offcanvas`).
`show`	Muestra un elemento offcanvas. Vuelve al llamador antes de que el elemento offcanvas se haya mostrado realmente (es decir, antes de que ocurra el evento `shown.bs.offcanvas`).
`hide`	Oculta un elemento offcanvas. Vuelve al llamador antes de que el elemento offcanvas se haya ocultado realmente (es decir, antes de que ocurra el evento `hidden.bs.offcanvas`).
`getInstance`	Método estático que te permite obtener la instancia de offcanvas asociada a un elemento del DOM
`getOrCreateInstance`	Método estático que te permite obtener la instancia de offcanvas asociada a un elemento del DOM, o crear una nueva en caso de que no estuviera inicializada

Eventos

La clase offcanvas de Bootstrap expone algunos eventos para conectarse a la funcionalidad de offcanvas.

Tipo de evento	Descripción
`show.bs.offcanvas`	Este evento se dispara inmediatamente cuando se llama al método de instancia `show`.
`shown.bs.offcanvas`	Este evento se dispara cuando un elemento offcanvas se ha hecho visible para el usuario (esperará a que se completen las transiciones CSS).
`hide.bs.offcanvas`	Este evento se dispara inmediatamente cuando se ha llamado al método `hide`.
`hidden.bs.offcanvas`	Este evento se dispara cuando un elemento offcanvas se ha ocultado al usuario (esperará a que se completen las transiciones CSS).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Offcanvas

Cómo funciona

Ejemplos

Componentes offcanvas

Offcanvas

Demo en vivo

Offcanvas

Ubicación

Offcanvas superior

Offcanvas derecho

Offcanvas inferior

Fondo

Con color y desplazamiento

Offcanvas con fondo

Con fondo y desplazamiento

Accesibilidad

Sass

Variables

Uso

A través de atributos data

A través de JavaScript

Opciones

Métodos

Métodos asíncronos y transiciones

Eventos