Saltar al contenido principal Saltar a la navegación de documentos
Check
in English

Offcanvas

Cree barras laterales ocultas en su proyecto para navegación, carritos de compras y más con algunas clases y nuestro complemento de JavaScript.

En esta página

Cómo funciona

Offcanvas es un componente de la barra lateral que se puede alternar a través de JavaScript para que aparezca desde el borde izquierdo, derecho, superior o inferior de la ventana gráfica. Los botones o anclas se usan como activadores que se adjuntan a elementos específicos que alterna, y datalos atributos se usan para invocar nuestro JavaScript.

  • Offcanvas comparte parte del mismo código JavaScript que los modales. Conceptualmente, son bastante similares, pero son complementos separados.
  • Del mismo modo, algunas variables Sass de origen para los estilos y dimensiones de offcanvas se heredan de las variables del modal.
  • Cuando se muestra, offcanvas incluye un fondo predeterminado en el que se puede hacer clic para ocultar el offcanvas.
  • De manera similar a los modales, solo se puede mostrar un lienzo a la vez.

¡Aviso! Dada la forma en que CSS maneja las animaciones, no puede usar margino translateen un .offcanvaselemento. En su lugar, utilice la clase como un elemento envolvente independiente.

El efecto de animación de este componente depende de la prefers-reduced-motionconsulta de medios. Consulte la sección de movimiento reducido de nuestra documentación de accesibilidad .

Ejemplos

Componentes fuera del lienzo

A continuación se muestra un ejemplo fuera del lienzo que se muestra de forma predeterminada (a través .showde .offcanvas). Offcanvas incluye compatibilidad con un encabezado con un botón de cierre y una clase de cuerpo opcional para algunos archivos padding. Le sugerimos que incluya encabezados fuera del lienzo con acciones de descarte siempre que sea posible, o proporcione una acción de descarte explícita.

Offcanvas
El contenido del offcanvas va aquí. Puede 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>

Demo en vivo

Use los botones a continuación para mostrar y ocultar un elemento fuera del lienzo a través de JavaScript que alterna la .showclase en un elemento con la .offcanvasclase.

  • .offcanvasoculta el contenido (predeterminado)
  • .offcanvas.showmuestra contenido

Puede usar un enlace con el hrefatributo o un botón con el data-bs-targetatributo. En ambos casos, data-bs-toggle="offcanvas"se requiere el.

Enlace con href
Offcanvas
Algún texto como marcador de posición. En la vida real puedes tener los elementos que hayas elegido. Me gusta, 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 cuerpo

El desplazamiento del <body>elemento está deshabilitado cuando se ven un lienzo fuera del lienzo y su fondo. Utilice el data-bs-scrollatributo para habilitar el <body>desplazamiento.

Offcanvas con desplazamiento del cuerpo

Intente desplazarse 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">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 cuerpo y fondo

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

Telón de fondo con desplazamiento

Intente desplazarse 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">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>

telón de fondo estático

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

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

Lienzo oscuro

Añadido en v5.2.0

Cambie la apariencia de los lienzos con utilidades para adaptarlos mejor a diferentes contextos, como barras de navegación oscuras. Aquí añadimos .text-bg-darka .offcanvasy .btn-close-whitea .btn-closepara un estilo adecuado con un lienzo oscuro. Si tiene menús desplegables dentro, considere también agregar .dropdown-menu-darka .dropdown-menu.

Offcanvas

Coloque contenido fuera del lienzo 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>

Sensible

Añadido en v5.2.0

Las clases receptivas fuera del lienzo ocultan el contenido fuera de la ventana gráfica desde un punto de interrupción especificado y hacia abajo. Por encima de ese punto de interrupción, el contenido dentro se comportará como de costumbre. Por ejemplo, .offcanvas-lgoculta el contenido en un lienzo fuera del lienzo debajo del lgpunto de interrupción, pero muestra el contenido por encima del punto de lginterrupción.

Cambie el tamaño de su navegador para mostrar la opción fuera del lienzo sensible.
Offcanvas receptivo

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>

Las clases receptivas fuera del lienzo están disponibles para cada punto de interrupción.

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

Colocación

No hay una ubicación predeterminada para los componentes fuera del lienzo, por lo que debe agregar una de las clases de modificadores a continuación.

  • .offcanvas-startcoloca offcanvas a la izquierda de la ventana gráfica (que se muestra arriba)
  • .offcanvas-endcoloca offcanvas a la derecha de la ventana gráfica
  • .offcanvas-topcoloca offcanvas en la parte superior de la ventana gráfica
  • .offcanvas-bottomcoloca offcanvas en la parte inferior de la ventana gráfica

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

Top de lona
...
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>
Offcanvas a la derecha
...
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>
Parte inferior de lona
...
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 fuera del lienzo es conceptualmente un cuadro de diálogo modal, asegúrese de agregar aria-labelledby="..."—haciendo referencia al título fuera del lienzo— a .offcanvas. Tenga en cuenta que no necesita agregar role="dialog", ya que ya lo agregamos a través de JavaScript.

CSS

Variables

Añadido en v5.2.0

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

  --#{$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};

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;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Uso

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

  • .offcanvasoculta el contenido
  • .offcanvas.showmuestra el contenido
  • .offcanvas-startoculta el lienzo a la izquierda
  • .offcanvas-endoculta el lienzo a la derecha
  • .offcanvas-topoculta el lienzo en la parte superior
  • .offcanvas-bottomoculta el lienzo en la parte inferior

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

A través de atributos de datos

Palanca

Agregue data-bs-toggle="offcanvas"y a data-bs-targeto hrefal elemento para asignar automáticamente el control de un elemento fuera del lienzo. El data-bs-targetatributo acepta un selector de CSS para aplicar el offcanvas. Asegúrese de agregar la clase offcanvasal elemento offcanvas. Si desea que se abra de forma predeterminada, agregue la clase adicional show.

Despedir

El despido se puede lograr con el dataatributo en un botón dentro del lienzo como se muestra a continuación:

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

o en un botón fuera del lienzo usando el data-bs-targetcomo se muestra 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, tenga 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 creación de ARIA . Haz esto bajo tu propio riesgo.

A través de JavaScript

Habilitar 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, puede agregar un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrese de cambiar el tipo de caso del nombre de la opción de " camelCase " a " kebab-case " al pasar las opciones a través de atributos de datos. Por ejemplo, use 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 reservados experimentaldata-bs-config que puede albergar una configuración de componente simple como una cadena JSON. Cuando un elemento tiene atributos data-bs-config='{"delay":0, "title":123}'y , el valor final será y los atributos de datos separados anularán los valores dados en . Además, los atributos de datos existentes pueden albergar valores JSON como .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Nombre Escribe Defecto Descripción
backdrop booleano o la cadenastatic true Aplique un telón de fondo en el cuerpo mientras el lienzo está abierto. Como alternativa, especifique staticun fondo que no cierre el lienzo exterior al hacer clic.
keyboard booleano true Cierra el lienzo cuando se presiona la tecla Escape.
scroll booleano false Permitir el desplazamiento del cuerpo mientras offcanvas está abierto.

Métodos

Transiciones y métodos asíncronos

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

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

Activa su contenido como un elemento fuera del lienzo. Acepta opciones opcionales object.

Puede crear una instancia fuera del lienzo con el constructor, por ejemplo:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Método Descripción
getInstance Método estático que le permite obtener la instancia fuera del lienzo asociada con un elemento DOM.
getOrCreateInstance Método estático que le permite obtener la instancia fuera del lienzo asociada con un elemento DOM, o crear una nueva en caso de que no se haya inicializado.
hide Oculta un elemento fuera del lienzo. Vuelve a la persona que llama antes de que el elemento offcanvas se haya ocultado (es decir, antes de hidden.bs.offcanvasque ocurra el evento).
show Muestra un elemento fuera del lienzo. Vuelve a la persona que llama antes de que se haya mostrado realmente el elemento offcanvas (es decir, antes de shown.bs.offcanvasque ocurra el evento).
toggle Alterna un elemento fuera del lienzo para que se muestre u oculte. Vuelve a la persona que llama antes de que el elemento offcanvas se haya mostrado u ocultado (es decir, antes de que ocurra el evento shown.bs.offcanvaso ).hidden.bs.offcanvas

Eventos

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

Tipo de evento Descripción
hide.bs.offcanvas Este evento se activa inmediatamente cuando hidese llama al método.
hidden.bs.offcanvas Este evento se activa cuando un elemento fuera del lienzo se ha ocultado al usuario (esperará a que se completen las transiciones de CSS).
hidePrevented.bs.offcanvas Este evento se activa cuando se muestra offcanvas, su fondo es staticy se realiza un clic fuera de offcanvas. El evento también se activa cuando se presiona la tecla Escape y la keyboardopción se establece en false.
show.bs.offcanvas Este evento se activa inmediatamente cuando showse llama al método de instancia.
shown.bs.offcanvas Este evento se activa cuando un elemento fuera del lienzo se hace visible para el usuario (esperará a que se completen las transiciones de CSS). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})