Offcanvas Bootstrap 5

Offcanvas (mampara)

Offcanvas (mampara) es similar a un modal (oculto por defecto y se muestra al activarse), pero se utiliza generalmente como menú de navegación lateral.

Cómo crear una barra lateral Offcanvas

El siguiente ejemplo muestra cómo crear una barra lateral offcanvas:

Ejemplo

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Título</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas">Cerrar</button>
  </div>
  <div class="offcanvas-body">
    <p>Algunos textos. Algunos textos. Algunos textos.</p>
    <p>Algunos textos. Algunos textos. Algunos textos.</p>
    <button class="btn btn-secondary" type="button">Botón</button>
  </div>
</div>
<!-- Botón para abrir el lateral de offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Abrir lateral de Offcanvas
</button>

Pruebe usted mismo

Ejemplo de explicación

.offcanvas clase crea el lateral de offcanvas.

.offcanvas-start clase ubica offcanvas y establece el ancho en 400px. Para más clases de ubicación, consulte los ejemplos a continuación.

.offcanvas-title clase que asegura márgenes adecuados y altura de línea.

Luego, agregue su contenido a .offcanvas-body clase.

Para abrir el lateral de offcanvas, debe usar <button> o <a> Elemento de dirección .offcanvas ID del contenedor (en nuestro ejemplo es #demo）。

Para usar <a> El elemento abre el lateral de offcanvas, puede usar la propiedad href en lugar de data-bs-target Atributo de dirección #demo.

Ubicación de Offcanvas

Utilice .offcanvas-start|end|top|bottom Ubique offcanvas a la izquierda, derecha, arriba o abajo:

Ejemplo derecho

<div class="offcanvas offcanvas-end" id="demo">

Pruebe usted mismo

Ejemplo superior

<div class="offcanvas offcanvas-top" id="demo">

Pruebe usted mismo

Ejemplo inferior

<div class="offcanvas offcanvas-bottom" id="demo">

Pruebe usted mismo