Passà à u cuntenutu principale Salta à a navigazione di documenti
Check
in English

Offcanvas

Custruite barre laterali nascosti in u vostru prughjettu per a navigazione, shopping carts, è più cù uni pochi di classi è u nostru plugin JavaScript.

In sta pagina

Cumu travaglia

Offcanvas hè un cumpunente di a barra laterale chì pò esse cambiatu via JavaScript per apparisce da u latu left, right, top, or bottom di a finestra. I buttoni o l'ancore sò usati cum'è attivatori chì sò attaccati à elementi specifichi chì toggle, è l' dataattributi sò usati per invucà u nostru JavaScript.

  • Offcanvas sparte un pocu di u listessu codice JavaScript cum'è modali. Conceptually, sò abbastanza simili, ma sò plugins separati.
  • In listessu modu, alcune variabili Sass fonte per i stili è e dimensioni di offcanvas sò ereditati da e variàbili di u modale.
  • Quandu si mostra, offcanvas include un sfondate predeterminatu chì pò esse clicatu per ammuccià l'offcanvas.
  • Simile à i modali, solu un offcanvas pò esse mostratu à tempu.

A testa alta ! Data cumu CSS gestisce l'animazioni, ùn pudete micca aduprà margino translatenantu à un .offcanvaselementu. Invece, aduprate a classa cum'è un elementu di imballaggio indipendente.

L'effettu di l'animazione di stu cumpunente dipende da a prefers-reduced-motionmedia query. Vede a sezione di movimentu ridottu di a nostra documentazione d'accessibilità .

Esempii

Cumpunenti offcanvas

Quì sottu hè un esempiu offcanvas chì hè mostratu per difettu (via .showon .offcanvas). Offcanvas include supportu per un header cù un buttone chjusu è una classa di corpu opzionale per qualchì iniziale padding. Suggeremu d'include intestazioni offcanvas cù azioni di licenzià ogni volta chì hè pussibule, o furnisce una azione esplicita di licenzià.

Offcanvas
U cuntenutu per l'offcanvas va quì. Pudete mette quasi ogni cumpunente Bootstrap o elementi persunalizati quì.
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 live

Aduprate i buttoni sottu per vede è ammuccià un elementu offcanvas via JavaScript chì cambia a .showclassa nantu à un elementu cù a .offcanvasclasse.

  • .offcanvasoculta u cuntenutu (predeterminatu)
  • .offcanvas.showmostra u cuntenutu

Pudete aduprà un ligame cù l' hrefattributu, o un buttone cù l' data-bs-targetattributu. In i dui casi, data-bs-toggle="offcanvas"hè necessariu.

Link cù href
Offcanvas
Qualchì testu cum'è placeholder. In a vita reale pudete avè l'elementi chì avete sceltu. Like, testu, imagine, listi, 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>

Scrolling di u corpu

U scorrimentu di l' <body>elementu hè disattivatu quandu un offcanvas è u so fondu sò visibili. Aduprà l' data-bs-scrollattributu per attivà u <body>scrolling.

Offcanvas cù scorrimentu di corpu

Pruvate scrolling u restu di a pagina per vede sta opzione in azzione.

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>

Scrolling di u corpu è u fondu

Pudete ancu attivà <body>u scrolling cù un sfondate visibile.

Fondu cù scrolling

Pruvate scrolling u restu di a pagina per vede sta opzione in azzione.

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>

Fondu staticu

Quandu u sfondate hè stallatu in static, l'offcanvas ùn si chjude micca quandu fate un clic fora di ellu.

Offcanvas
Ùn chjuderaghju micca se cliccate fora di 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 scuru

Aggiuntu in v5.2.0

Cambia l'aspettu di l'offcanvases cù l'utilità per cunfurmà megliu cù diversi cuntesti cum'è navbars scuri. Quì aghjustemu .text-bg-darkà u .offcanvasè .btn-close-whiteà .btn-closeper un stilu propiu cù un offcanvas scuru. Sì avete menu dropdowns, cunzidira ancu aghjunghje .dropdown-menu-darkà .dropdown-menu.

Offcanvas

Mettite u cuntenutu offcanvas quì.

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>

Risposta

Aggiuntu in v5.2.0

E classi offcanvas responsive ocultanu u cuntenutu fora di a finestra di vista da un puntu di rottura specificatu è in giù. Sopra à quellu puntu di ruptura, u cuntenutu di l'internu si comporta cum'è di solitu. Per esempiu, .offcanvas-lgoculta u cuntenutu in un offcanvas sottu à u lgbreakpoint, ma mostra u cuntenutu sopra à u lgbreakpoint.

Ridimensionà u vostru navigatore per vede u toggle offcanvas responsive.
Risposta offcanvas

Questu hè cuntenutu in 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>

E classi offcanvas responsive sò dispunibuli per ogni breakpoint.

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

Placement

Ùn ci hè micca un locu predeterminatu per i cumpunenti offcanvas, cusì duvete aghjunghje una di e classi modificatori sottu.

  • .offcanvas-startmette fora di tela à a manca di a finestra (mostra sopra)
  • .offcanvas-endmette offcanvas à a diritta di u viewport
  • .offcanvas-topmette offcanvas in cima di u viewport
  • .offcanvas-bottommette offcanvas in u fondu di u viewport

Pruvate l'esempii in cima, destra è sottu sottu.

Top offcanvas
...
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 ghjustu
...
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>
Offcanvas fondu
...
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>

L'accessibilità

Siccomu u pannellu offcanvas hè cuncettualmente un dialogu modale, assicuratevi di aghjunghje aria-labelledby="..."- in riferimentu à u titulu offcanvas - à .offcanvas. Nota chì ùn avete micca bisognu di aghjunghje role="dialog"postu chì l'avemu digià aghjustatu via JavaScript.

CSS

Variabili

Aggiuntu in v5.2.0

Comu parte di l'approcciu di variabili CSS in evoluzione di Bootstrap, offcanvas usa avà variabili CSS lucali .offcanvasper una persunalizazione rinfurzata in tempu reale. I valori per e variabili CSS sò stabiliti via Sass, cusì a persunalizazione di Sass hè ancu supportata.

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

Variabili Sass

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

Usu

U plugin offcanvas utilizeghja uni pochi di classi è attributi per trattà u pesu pesante:

  • .offcanvasoculta u cuntenutu
  • .offcanvas.showmostra u cuntenutu
  • .offcanvas-startnasconde l'offcanvas a sinistra
  • .offcanvas-endnasconde l'offcanvas a destra
  • .offcanvas-topnasconde l'offcanvas in cima
  • .offcanvas-bottomnasconde l'offcanvas in u fondu

Aghjunghjite un buttone di scartà cù l' data-bs-dismiss="offcanvas"attributu, chì attiva a funziunalità JavaScript. Assicuratevi di utilizà l' <button>elementu cun ellu per un cumpurtamentu propiu in tutti i dispositi.

Via attributi di dati

Toggle

Aghjunghjite data-bs-toggle="offcanvas"è a data-bs-targeto hrefà l'elementu per assignà automaticamente u cuntrollu di un elementu offcanvas. L' data-bs-targetattributu accetta un selettore CSS per applicà l'offcanvas. Assicuratevi di aghjunghje a classa offcanvasà l'elementu offcanvas. Se vulete chì l'apertura predefinita, aghjunghje a classa supplementaria show.

Licenziate

U licenziamentu pò esse ottenutu cù l' dataattributu nantu à un buttone in l'offcanvas cum'è dimustratu quì sottu:

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

o nantu à un buttone fora di l'offcanvas usendu u data-bs-targetcum'è dimustratu quì sottu:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Mentre chì e duie manere di scaccià un offcanvas sò supportati, tenete in mente chì u dismissu da fora di un offcanvas ùn currisponde micca à u mudellu di dialogu (modale) di a Guida di Pratiche di Scrittura ARIA . Fate questu à u vostru propiu risicu.

Via JavaScript

Abilita manualmente cù:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Opzioni

Siccomu l'opzioni ponu esse passati via attributi di dati o JavaScript, pudete appiccicà un nome d'opzione à data-bs-, cum'è in data-bs-animation="{value}". Assicuratevi di cambià u tipu di casu di u nome di l'opzione da " camelCase " à " kebab-case " quandu passanu l'opzioni via attributi di dati. Per esempiu, aduprà data-bs-custom-class="beautifier"invece di data-bs-customClass="beautifier".

A partire da Bootstrap 5.2.0, tutti i cumpunenti supportanu un attributu di dati riservatu sperimentaledata-bs-config chì pò accoglie cunfigurazione di cumpunenti simplice cum'è una stringa JSON. Quandu un elementu hà data-bs-config='{"delay":0, "title":123}'è data-bs-title="456"attributi, u valore finali titleserà 456è l'attributi di dati separati annullaranu i valori dati nantu à data-bs-config. Inoltre, l'attributi di dati esistenti sò capaci di allughjà valori JSON cum'è data-bs-delay='{"show":0,"hide":150}'.

Nome Tipu Default Descrizzione
backdrop boolean o a stringastatic true Applica un sfondate nantu à u corpu mentre offcanvas hè apertu. In alternativa, specificate staticper un sfondate chì ùn chjude micca u offcanvas quandu cliccate.
keyboard booleanu true Chiude l'offcanvas quandu si preme a chjave di escape.
scroll booleanu false Permette u scorrimentu di u corpu mentre offcanvas hè apertu.

I metudi

Metudi asincroni è transizioni

Tutti i metudi API sò asincroni è cumincianu una transizione . Ritornanu à u chjamante appena a transizione hè iniziata, ma prima chì finisce . Inoltre, un metudu chjamatu nantu à un cumpunente di transizione serà ignoratu .

Vede a nostra documentazione JavaScript per più infurmazione .

Attiva u vostru cuntenutu cum'è un elementu offcanvas. Accetta opzioni opzionali object.

Pudete creà una istanza offcanvas cù u custruttore, per esempiu:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metudu Descrizzione
getInstance Metudu staticu chì permette di ottene l'istanza offcanvas assuciata à un elementu DOM.
getOrCreateInstance Metudu staticu chì permette di ottene l'istanza offcanvas assuciata à un elementu DOM, o creanu un novu in casu ùn hè micca inizializatu.
hide Nasconde un elementu offcanvas. Ritorna à u chjamante prima chì l'elementu offcanvas hè statu oculatu (vale à dì prima chì l' hidden.bs.offcanvasavvenimentu si faci).
show Mostra un elementu offcanvas. Ritorna à u chjamante prima chì l'elementu offcanvas hè statu veramente mostratu (vale à dì prima chì l' shown.bs.offcanvasavvenimentu si faci).
toggle Commuta un elementu offcanvas per mostratu o oculatu. Ritorna à u chjamante prima chì l'elementu offcanvas hè statu effettivamente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.offcanvaso hidden.bs.offcanvassi faci).

Avvenimenti

A classe offcanvas di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità offcanvas.

Tipu di avvenimentu Descrizzione
hide.bs.offcanvas Stu avvenimentu hè sparatu immediatamente quandu u hidemetudu hè statu chjamatu.
hidden.bs.offcanvas Questu avvenimentu hè sparatu quandu un elementu offcanvas hè statu oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
hidePrevented.bs.offcanvas Questu avvenimentu hè sparatu quandu l'offcanvas hè mostratu, u so sfondate hè staticè un clic fora di l'offcanvas hè realizatu. L'avvenimentu hè ancu sparatu quandu a chjave di escape hè pressata è l' keyboardopzione hè impostata à false.
show.bs.offcanvas Questu avvenimentu spara immediatamente quandu u showmetudu di istanza hè chjamatu.
shown.bs.offcanvas Questu avvenimentu hè sparatu quandu un elementu offcanvas hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})