Offcanvas

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

En esta página

Cómo funciona

Offcanvas es un componente de barra lateral que se puede alternar mediante JavaScript para aparecer desde el borde izquierdo, derecho, superior o inferior de la ventana gráfica (viewport). Los botones o enlaces se utilizan como activadores (triggers) que se adjuntan a los elementos específicos que alternas, y los atributos data se utilizan para invocar nuestro JavaScript.

Offcanvas comparte parte del mismo código JavaScript que los modales. Conceptualmente son bastante similares, pero son plugins independientes.
Del mismo modo, 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 (backdrop) predeterminado en el que se puede hacer clic para ocultar el offcanvas.
Al igual que los modales, solo se puede mostrar un offcanvas a la vez.

¡Atención! Debido a 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 consulta de medios prefers-reduced-motion. Consulta la sección de movimiento reducido en nuestra documentación de accesibilidad.

Ejemplos

Componentes de offcanvas

A continuación se muestra un ejemplo de offcanvas que se muestra de forma predeterminada (a través de .show en .offcanvas). Offcanvas incluye soporte para un encabezado con un botón de cierre y una clase de cuerpo opcional para un padding inicial. Sugerimos que incluyas encabezados offcanvas con acciones de descarte siempre que sea posible, o que proporciones una acción de descarte explícita.

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

html

<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">
    El contenido para el offcanvas va aquí. Puedes colocar casi cualquier componente de Bootstrap o elementos personalizados aquí.
  </div>
</div>

Demostración en vivo

Usa los botones a continuación para mostrar y ocultar un elemento offcanvas a través de JavaScript que alterna la clase .show en un elemento con la clase .offcanvas.

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

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

Enlace con href

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

html

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Enlace con href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Botón con 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>
      Un texto de marcador de posición. En la vida real puedes tener los elementos que hayas elegido. Como texto, imágenes, listas, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Botón desplegable
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí</a></li>
      </ul>
    </div>
  </div>
</div>

Desplazamiento del cuerpo

El desplazamiento del elemento <body> está deshabilitado cuando un offcanvas y su fondo son visibles. Utiliza el atributo data-bs-scroll para habilitar el desplazamiento del <body>.

Intenta desplazarte por el resto de la página para ver esta opción en acción.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Habilitar el desplazamiento del cuerpo</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">Offcanvas con desplazamiento del cuerpo</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Intenta desplazarte por el resto de la página para ver esta opción en acción.</p>
  </div>
</div>

Desplazamiento del cuerpo y fondo

También puedes habilitar el desplazamiento del <body> con un fondo (backdrop) visible.

Intenta desplazarte por el resto de la página para ver esta opción en acción.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Habilitar tanto el desplazamiento como el fondo</button>

<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">Fondo con desplazamiento</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Intenta desplazarte por el resto de la página para ver esta opción en acción.</p>
  </div>
</div>

Fondo estático

Cuando el fondo se establece en estático, el offcanvas no se cerrará al hacer clic fuera de él.

No me cerraré si haces clic fuera de mí.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Alternar offcanvas estático
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      No me cerraré si haces clic fuera de mí.
    </div>
  </div>
</div>

Offcanvas oscuro

Obsoleto en v5.3.0 Agregado en v5.2.0

Cambia la apariencia de los offcanvas con utilidades para adaptarlos mejor a diferentes contextos como las barras de navegación oscuras. Aquí agregamos .text-bg-dark al .offcanvas y .btn-close-white a .btn-close para un estilo adecuado con un offcanvas oscuro. Si tienes menús desplegables en el interior, considera también agregar .dropdown-menu-dark a .dropdown-menu.

¡Atención! Las variantes oscuras para los componentes quedaron obsoletas en la v5.3.0 con la introducción de los modos de color. En lugar de agregar manualmente las clases mencionadas anteriormente, establece data-bs-theme="dark" en el elemento raíz, un contenedor principal o el propio componente.

Coloque el contenido del offcanvas aquí.

html

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Coloque el contenido del offcanvas aquí.</p>
  </div>
</div>

Responsivo

Agregado en v5.2.0

Las clases offcanvas responsivas ocultan el contenido fuera de la ventana gráfica a partir de un punto de interrupción (breakpoint) especificado y hacia abajo. Por encima de ese punto de interrupción, el contenido del interior se comportará como de costumbre. Por ejemplo, .offcanvas-lg oculta el contenido en un offcanvas debajo del punto de interrupción lg, pero muestra el contenido por encima del punto de interrupción lg. Las clases offcanvas responsivas están disponibles para cada punto de interrupción.

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

Para crear un offcanvas responsivo, reemplaza la clase base .offcanvas con una variante responsiva y asegúrate de que tu botón de cierre tenga un data-bs-target explícito.

Cambia el tamaño de tu navegador para mostrar el alternador de offcanvas responsivo.

Este es el contenido dentro de un .offcanvas-lg.

html

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Alternar offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Cambia el tamaño de tu navegador para mostrar el alternador de offcanvas responsivo.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Offcanvas responsivo</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">Este es el contenido dentro de un <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Ubicación

No hay una ubicación predeterminada para los componentes offcanvas, por lo que debes agregar una de las clases modificadoras a continuación.

.offcanvas-start coloca el offcanvas a la izquierda de la ventana gráfica (se muestra arriba)
.offcanvas-end coloca el offcanvas a la derecha de la ventana gráfica
.offcanvas-top coloca el offcanvas en la parte superior de la ventana gráfica
.offcanvas-bottom coloca el offcanvas en la parte inferior de la ventana gráfica

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

...

html

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

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

...

html

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

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

...

html

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

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

Accesibilidad

Dado que el panel offcanvas es conceptualmente un diálogo modal, asegúrate de agregar aria-labelledby="..." (que hace referencia al título del offcanvas) a .offcanvas. Ten en cuenta que no necesitas agregar role="dialog" ya que lo agregamos automáticamente a través de JavaScript.

CSS

Variables

Agregado en v5.2.0

Como parte del enfoque evolutivo de las variables CSS de Bootstrap, offcanvas ahora usa variables CSS locales en .offcanvas para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.

scss/_offcanvas.scss

--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
--#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
--#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
--#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
--#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
--#{$prefix}offcanvas-color: #{$offcanvas-color};
--#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
--#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
--#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
--#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
--#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};

Variables de Sass

scss/_variables.scss

$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:                var(--#{$prefix}body-bg);
$offcanvas-color:                   var(--#{$prefix}body-color);
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Uso

El plugin offcanvas utiliza algunas clases y atributos para encargarse del 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-top oculta el offcanvas en la parte superior
.offcanvas-bottom oculta el offcanvas en la parte inferior

Agrega un botón de descarte con el atributo data-bs-dismiss="offcanvas", que activa la funcionalidad de JavaScript. Asegúrate de utilizar el elemento <button> con él para un comportamiento correcto en todos los dispositivos.

A través de atributos de datos

Alternar

Agrega 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 al que aplicar el offcanvas. Asegúrate de agregar la clase offcanvas al elemento offcanvas. Si deseas que se abra de forma predeterminada, agrega la clase adicional show.

Descartar

El descarte se puede lograr con el atributo data-bs-dismiss en un botón dentro del offcanvas como se demuestra a continuación:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

o en un botón fuera del offcanvas utilizando el data-bs-target adicional como se demuestra a continuación:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

Si bien se admiten ambas formas de descartar un offcanvas, ten en cuenta que descartar desde fuera de un offcanvas no coincide con el patrón de diálogo (modal) de la Guía de prácticas de autoría de ARIA. Haz esto bajo tu propio riesgo.

A través de JavaScript

Habilita manualmente con:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Opciones

Como las opciones se pueden pasar a través de atributos de datos o JavaScript, puedes añadir un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar el tipo de mayúsculas y minúsculas del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones a través de atributos de datos. Por ejemplo, usa data-bs-custom-class="beautifier" en lugar de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos los componentes admiten un atributo de datos reservado experimental data-bs-config que puede albergar una configuración simple del componente como una cadena JSON. Cuando un elemento tiene los atributos data-bs-config='{"delay":0, "title":123}' y data-bs-title="456", el valor final de title será 456 y los atributos de datos separados anularán los valores proporcionados en data-bs-config. Además, los atributos de datos existentes pueden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

El objeto de configuración final es el resultado fusionado de data-bs-config, data-bs- y el js object (objeto js) donde el último par clave-valor proporcionado anula a los demás.

Nombre	Tipo	Predeterminado	Descripción
`backdrop`	boolean o el texto `static`	`true`	Aplica un fondo (backdrop) en el cuerpo mientras offcanvas está abierto. Alternativamente, especifica `static` para un fondo que no cierre el offcanvas cuando se hace clic.
`keyboard`	boolean	`true`	Cierra el offcanvas cuando se presiona la tecla Escape.
`scroll`	boolean	`false`	Permite el desplazamiento del cuerpo mientras offcanvas está abierto.

Métodos

Todos los métodos de la API son asíncronos e inician una transición. Devuelven el control al llamador tan pronto como se inicia la transición, pero antes de que termine. Además, se ignorará cualquier llamada a un método en un componente en transición. Más información en nuestra documentación de JavaScript.

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

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

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

Método	Descripción
`dispose`	Destruye el offcanvas de un elemento.
`getInstance`	Método estático que te permite obtener la instancia de offcanvas asociada con un elemento DOM.
`getOrCreateInstance`	Método estático que te permite obtener la instancia de offcanvas asociada con un elemento DOM, o crear una nueva en caso de que no haya sido inicializada.
`hide`	Oculta un elemento offcanvas. Devuelve el control al llamador antes de que el elemento offcanvas se haya ocultado realmente (es decir, antes de que ocurra el evento `hidden.bs.offcanvas`).
`show`	Muestra un elemento offcanvas. Devuelve el control al llamador antes de que el elemento offcanvas se haya mostrado realmente (es decir, antes de que ocurra el evento `shown.bs.offcanvas`).
`toggle`	Alterna un elemento offcanvas a mostrado u oculto. Devuelve el control 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`).

Eventos

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

Tipo de evento	Descripción
`hide.bs.offcanvas`	Este evento se dispara inmediatamente cuando se llama al método `hide`.
`hidden.bs.offcanvas`	Este evento se dispara cuando un elemento offcanvas se ha ocultado del usuario (esperará a que se completen las transiciones CSS).
`hidePrevented.bs.offcanvas`	Este evento se dispara cuando el offcanvas se muestra, su fondo es `static` y se realiza un clic fuera del offcanvas. El evento también se dispara cuando se presiona la tecla Escape y la opción `keyboard` se establece en `false`.
`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).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

Offcanvas

¿Te gustó esta traducción?

Cómo funciona

Ejemplos

Componentes de offcanvas

Offcanvas

Demostración en vivo

Offcanvas

Desplazamiento del cuerpo

Offcanvas con desplazamiento del cuerpo

Desplazamiento del cuerpo y fondo

Fondo con desplazamiento

Fondo estático

Offcanvas

Offcanvas oscuro

Offcanvas

Responsivo

Offcanvas responsivo

Ubicación

Offcanvas superior

Offcanvas derecho

Offcanvas inferior

Accesibilidad

CSS

Variables

Variables de Sass

Uso

A través de atributos de datos

Alternar

Descartar

A través de JavaScript

Opciones

Métodos

Eventos