Bootstrap 5 Offcanvas

Offcanvas (Canva)

L'Offcanvas è simile alla modale (nascosta per default e visibile quando attivata), ma solitamente viene utilizzata come menu di navigazione laterale.

Come creare una sidebar Offcanvas

Ecco un esempio di come creare una sidebar offcanvas:

Esempio

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Titolo</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Qualche testo. Qualche testo. Qualche testo.</p>
    <p>Qualche testo. Qualche testo. Qualche testo.</p>
    <button class="btn btn-secondary" type="button">Pulsante</button>
  </div>
</div>
<!-- Bottone per aprire la barra laterale offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Apri la barra laterale Offcanvas
</button>

Prova personalmente

Esempio di spiegazione

.offcanvas Classe crea la barra laterale offcanvas.

.offcanvas-start Classe posiziona l'offcanvas e imposta la larghezza a 400px. Per ulteriori classi di posizionamento, vedere gli esempi di seguito.

.offcanvas-title Classe che garantisce margini esterni e altezza delle righe appropriati.

Poi, aggiungi il tuo contenuto alla .offcanvas-body la classe.

Per aprire la barra laterale offcanvas, devi usare <button> o <a> elemento di indirizzo .offcanvas L'id del contenitore (nel nostro esempio è #demo）。

Per utilizzare <a> L'elemento apre la barra laterale offcanvas, puoi usare l'attributo href invece di data-bs-target Proprietà di indirizzo #demo.

Posizionamento Offcanvas

Utilizza .offcanvas-start|end|top|bottom Posiziona l'offcanvas a sinistra, destra, in alto o in basso:

Esempio laterale destro

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

Prova personalmente

Esempio superiore

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

Prova personalmente

Esempio inferiore

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

Prova personalmente