I componenti OffCanvas, o blade in Azure, sono delle sidebar che appaiono o scompaiono a seguito di un iterazione con l'utente. Il loro funzionamento è simile ad una modale, ciò che cambia è la posizione e il contesto di utilizzo.

È un componente abbastanza insolito da trovare nel panorama web, ma il suo utilizzo si sta espandendo, tanto che lo troviamo anche quando mettiamo un articolo nel carrello di Amazon.

Il vantaggio dell'integrazione con Bootstrap è la facilità di inizializzazione e utilizzo: come abbiamo già detto è molto simile a una modale, e lo è anche il codice.

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Titolo</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Contenuto
  </div>
</div>

A questo va ovviamente aggiunto il bottone che permette di visualizzare il componente. Anche in questo caso andiamo sul sicuro utilizzando gli attributi data-bs-toggle e data-bs-target.

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

Così come per le modali abbiamo a disposizione delle opzioni riguardanti le dimensioni, qui troviamo delle classi che ci permettono di posizionare l'OffCanvas all'interno della pagina.

<div class="offcanvas offcanvas-start"><!-- sinistra --></div>
<div class="offcanvas offcanvas-end"><!-- destra --></div>
<div class="offcanvas offcanvas-top"><!-- sopra --></div>
<div class="offcanvas offcanvas-bottom"><!-- sotto --></div>

Avendo poi delle caratteristiche da sidebar possiamo decidere di rimuovere il backdrop, o sfondo nero, e abilitare lo scroll sul contenuto della pagina.

<div class="offcanvas offcanvas-start" data-bs-scroll="true">
  <!-- abilita lo scroll -->
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false">
  <!-- rimuove il backdrop -->
</div>

Nel caso in cui uil codice HTML dell'elemento venga inserito solo dopo il primo caricamento della pagina, possiamo attivare il componente tramite JavaScript.

var offcanvas = document.getElementById('offcanvas');
var bsOffcanvas = new bootstrap.Offcanvas(offcanvas);