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 alternar mediante JavaScript para que aparezca desde el borde izquierdo, derecho, superior o inferior del viewport. Los botones o anclajes se usan como disparadores que se adjuntan a elementos específicos que alternas, 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í.

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">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

Demostración 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.

html

<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>

Desplazamiento del body

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

Prueba a desplazar 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">Enable body scrolling</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 with body scrolling</h5>
    <button type="button" class="btn-close" 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>

Desplazamiento del body y fondo

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

Prueba a desplazar 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">Enable both scrolling & backdrop</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">Backdrop with scrolling</h5>
    <button type="button" class="btn-close" 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>

Fondo estático

Cuando el fondo está establecido como 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">
  Toggle static offcanvas
</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>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Offcanvas oscuro

Obsoleto en v5.3.0 Añadido en v5.2.0

Cambia la apariencia de los offcanvas con utilidades para que coincidan mejor con diferentes contextos como navbars oscuros. Aquí añadimos .text-bg-dark al .offcanvas y .btn-close-white a .btn-close para un estilo correcto con un offcanvas oscuro. Si tienes dropdowns dentro, considera también añadir .dropdown-menu-dark a .dropdown-menu.

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

Coloca 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>Place offcanvas content here.</p>
  </div>
</div>

Responsive

Añadido en v5.2.0

Las clases offcanvas responsive ocultan el contenido fuera del viewport desde un breakpoint específico hacia abajo. Por encima de ese breakpoint, los contenidos internos se comportarán como de costumbre. Por ejemplo, .offcanvas-lg oculta el contenido en un offcanvas por debajo del breakpoint lg, pero muestra el contenido por encima del breakpoint lg. Las clases offcanvas responsive están disponibles para cada breakpoint.

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

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

Redimensiona tu navegador para mostrar el toggle de offcanvas responsive.

Este es 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">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</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">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Ubicación

No hay una ubicación predeterminada para los componentes offcanvas, por lo 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.

...

html

<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>

...

html

<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</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">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" 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 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.

CSS

Variables

Añadido en v5.2.0

Como parte del enfoque evolutivo de variables CSS de Bootstrap, offcanvas ahora usa variables CSS locales en .offcanvas para una personalización en tiempo real mejorada. Los valores de las variables CSS se establecen mediante Sass, por lo que la personalización con Sass también sigue siendo 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 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 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-top oculta el offcanvas en la parte superior
.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.

Vía atributos data

Alternar

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.

Cerrar

El cierre 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 usando 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>

Aunque ambas formas de cerrar un offcanvas son compatibles, ten en cuenta que cerrar desde fuera de un offcanvas no coincide con el ARIA Authoring Practices Guide dialog (modal) pattern. Haz esto bajo tu propia responsabilidad.

Vía 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 vía atributos data 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 capitalización del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones vía atributos data. 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 soportan un atributo data 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 data separados sobrescribirán los valores dados en data-bs-config. Además, los atributos data existentes pueden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

El objeto de configuración final es el resultado de combinar data-bs-config, data-bs-, y el objeto js, donde el último par clave-valor dado sobrescribe a los demás.

Nombre	Tipo	Predeterminado	Descripción
`backdrop`	boolean o la cadena `static`	`true`	Aplica un fondo en el body mientras el offcanvas está abierto. Alternativamente, especifica `static` para un fondo que no cierre el offcanvas al hacer clic.
`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

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

Activa tu contenido como un elemento offcanvas. Acepta un objeto 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 a un elemento DOM.
`getOrCreateInstance`	Método estático que te permite obtener la instancia de offcanvas asociada a un elemento DOM, o crear una nueva en caso de que no haya sido inicializada.
`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`).
`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`).
`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`).

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 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).
`hidePrevented.bs.offcanvas`	Este evento se dispara cuando el offcanvas se muestra, su fondo es `static` y se hace clic fuera del offcanvas. El evento también se dispara cuando se presiona la tecla escape y la opción `keyboard` está establecida 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

Cómo funciona

Ejemplos

Componentes offcanvas

Offcanvas

Demostración en vivo

Offcanvas

Desplazamiento del body

Offcanvas con desplazamiento del body

Desplazamiento del body y fondo

Fondo con desplazamiento

Fondo estático

Offcanvas

Offcanvas oscuro

Offcanvas

Responsive

Offcanvas responsive

Ubicación

Offcanvas superior

Offcanvas derecho

Offcanvas inferior

Accesibilidad

CSS

Variables

Variables Sass

Uso

Vía atributos data

Alternar

Cerrar

Vía JavaScript

Opciones

Métodos

Eventos