Bootstrap 5.2 / Componenten

Offcanvas

Bouw verborgen zijbalken in je project voor navigatie, winkelwagens en meer, met een paar klassen en onze JavaScript-plugin.

Hoe het werkt

Offcanvas is een zijbalkcomponent dat via JavaScript geschakeld kan worden en vanaf de linker-, rechter-, boven- of onderrand van de viewport verschijnt. Knoppen of ankers dienen als triggers die aan specifieke elementen gekoppeld zijn die je schakelt, en data-attributen roepen onze JavaScript aan.

Offcanvas deelt een deel van de JavaScript-code met modals. Conceptueel lijken ze sterk op elkaar, maar het zijn aparte plugins.
Op vergelijkbare wijze worden sommige Sass-bronvariabelen voor de stijlen en afmetingen van offcanvas geërfd van de variabelen van de modal.
Wanneer offcanvas getoond wordt, is er standaard een backdrop waarop je kunt klikken om de offcanvas te verbergen.
Net als bij modals kan er maar één offcanvas tegelijk getoond worden.

Let op! Vanwege de manier waarop CSS animaties afhandelt, kun je geen margin of translate op een .offcanvas-element gebruiken. Gebruik de klasse in plaats daarvan op een apart omhullend element.

Let op

Animaties en overgangen houden rekening met de instelling prefers-reduced-motion. Heeft een bezoeker in het besturingssysteem om minder beweging gevraagd, dan vallen overgangen weg.

Voorbeelden

Offcanvas-componenten

Hieronder staat een offcanvas-voorbeeld dat standaard wordt getoond (via .show op .offcanvas). Offcanvas biedt ondersteuning voor een kop met sluitknop en een optionele body-klasse voor wat initiële padding. We raden aan waar mogelijk offcanvas-koppen met sluitacties op te nemen, of anders een expliciete sluitactie te bieden.

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="Sluiten"></button>
  </div>
  <div class="offcanvas-body">
    Hier komt de content van de offcanvas. Je kunt hier vrijwel elk Bootstrap-component of eigen element plaatsen.
  </div>
</div>

Live demo

Gebruik de knoppen hieronder om een offcanvas-element te tonen en te verbergen via JavaScript, die de klasse .show schakelt op een element met de klasse .offcanvas.

.offcanvas verbergt content (standaard)
.offcanvas.show toont content

Je kunt een link met het href-attribuut gebruiken, of een knop met het data-bs-target-attribuut. In beide gevallen is data-bs-toggle="offcanvas" verplicht.

HTML

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link met href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Knop met 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="Sluiten"></button>
  </div>
  <div class="offcanvas-body">
    <div class="">
      Wat tekst als opvulling. In de praktijk kun je hier de elementen zetten die je zelf kiest. Zoals tekst, afbeeldingen, lijsten enzovoort.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown-knop
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Actie</a></li>
        <li><a class="dropdown-item" href="#">Nog een actie</a></li>
        <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
      </ul>
    </div>
  </div>
</div>

Scrollen van de body

Scrollen van het <body>-element is uitgeschakeld wanneer een offcanvas en zijn backdrop zichtbaar zijn. Gebruik het attribuut data-bs-scroll om scrollen van de <body> toe te staan.

HTML

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Body-scrollen inschakelen</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 met body-scrollen</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Sluiten"></button>
  </div>
  <div class="offcanvas-body">
    <p>Probeer door de rest van de pagina te scrollen om deze optie in actie te zien.</p>
  </div>
</div>

Body-scrollen en backdrop

Je kunt scrollen van de <body> ook inschakelen met een zichtbare backdrop.

HTML

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Scrollen én backdrop inschakelen</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 met scrollen</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Sluiten"></button>
  </div>
  <div class="offcanvas-body">
    <p>Probeer door de rest van de pagina te scrollen om deze optie in actie te zien.</p>
  </div>
</div>

Statische backdrop

Wanneer de backdrop op static staat, sluit de offcanvas niet wanneer je erbuiten klikt.

HTML

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Statische offcanvas schakelen
</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="Sluiten"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Ik sluit niet als je buiten mij klikt.
    </div>
  </div>
</div>

Donkere offcanvas

Nieuw in v5.2.0

Wijzig het uiterlijk van offcanvassen met utilities zodat ze beter aansluiten bij verschillende contexten, zoals donkere navbars. Hier voegen we .text-bg-dark toe aan de .offcanvas en .btn-close-white aan .btn-close voor de juiste styling bij een donkere offcanvas. Zitten er dropdowns in, overweeg dan ook .dropdown-menu-dark aan .dropdown-menu toe te voegen.

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="Sluiten"></button>
  </div>
  <div class="offcanvas-body">
    <p>Plaats hier de offcanvas-content.</p>
  </div>
</div>

Responsief

Nieuw in v5.2.0

Responsieve offcanvas-klassen verbergen content buiten de viewport vanaf een opgegeven breakpoint en kleiner. Boven dat breakpoint gedraagt de content zich zoals gebruikelijk. Zo verbergt .offcanvas-lg content in een offcanvas onder het lg-breakpoint, maar toont hij de content boven het lg-breakpoint.

HTML

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Offcanvas schakelen</button>

<div class="alert alert-info d-none d-lg-block">Verklein je browser om de responsieve offcanvas-toggle te tonen.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsieve offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Sluiten"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">Dit is content binnen een <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Responsieve offcanvas-klassen zijn voor elk breakpoint beschikbaar.

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

Plaatsing

Er is geen standaardplaatsing voor offcanvas-componenten, dus je moet een van de onderstaande modifier-klassen toevoegen.

.offcanvas-start plaatst offcanvas links in de viewport (hierboven getoond)
.offcanvas-end plaatst offcanvas rechts in de viewport
.offcanvas-top plaatst offcanvas bovenaan de viewport
.offcanvas-bottom plaatst offcanvas onderaan de viewport

Probeer hieronder de voorbeelden voor boven, rechts en onder uit.

HTML

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Offcanvas bovenaan schakelen</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas bovenaan</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Sluiten"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

HTML

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Offcanvas rechts schakelen</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas rechts</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Sluiten"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

HTML

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Offcanvas onderaan schakelen</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas onderaan</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Sluiten"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Toegankelijkheid

Omdat het offcanvas-paneel conceptueel een modal-dialoogvenster is, voeg je aria-labelledby="..." — verwijzend naar de offcanvas-titel — toe aan .offcanvas. Let op: je hoeft role="dialog" niet toe te voegen, omdat wij dat al via JavaScript doen.

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruikt offcanvas nu lokale CSS-variabelen op .offcanvas, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Standaardwaarden: zie scss/_offcanvas.scss in de Bootstrap-broncode.

Sass-variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Gebruik

De offcanvas-plugin gebruikt een paar klassen en attributen om het zware werk te doen:

.offcanvas verbergt de content
.offcanvas.show toont de content
.offcanvas-start verbergt de offcanvas aan de linkerkant
.offcanvas-end verbergt de offcanvas aan de rechterkant
.offcanvas-top verbergt de offcanvas aan de bovenkant
.offcanvas-bottom verbergt de offcanvas aan de onderkant

Voeg een sluitknop toe met het attribuut data-bs-dismiss="offcanvas", dat de JavaScript-functionaliteit activeert. Gebruik daarbij het <button>-element voor correct gedrag op alle apparaten.

Via data-attributen

Schakelen

Voeg data-bs-toggle="offcanvas" en een data-bs-target of href aan het element toe om automatisch de bediening van één offcanvas-element toe te wijzen. Het attribuut data-bs-target accepteert een CSS-selector om de offcanvas op toe te passen. Zorg dat je de klasse offcanvas aan het offcanvas-element toevoegt. Wil je dat het standaard open staat, voeg dan de extra klasse show toe.

Sluiten

Klik-om-te-sluiten werkt automatisch via de dismiss data-API, zonder dat je zelf JavaScript hoeft te initialiseren. Gebruik het attribuut data-bs-dismiss="offcanvas" op een knop binnen het component om het te sluiten.

Let op

Hoewel beide manieren om een offcanvas te sluiten worden ondersteund, moet je bedenken dat sluiten van buiten een offcanvas niet overeenkomt met het dialog- (modal-)patroon van de ARIA Authoring Practices Guide. Doe dit op eigen risico.

Via JavaScript

Handmatig inschakelen met:

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

Opties

De meeste plugins kun je aanzetten zonder JavaScript te schrijven, puur met een data-bs-*-attribuut als trigger. Al deze data-attributen zijn genamespaced met bs-, zodat ze niet botsen met andere scripts.

Naam	Type	Standaard	Omschrijving
`backdrop`	boolean of de string `static`	`true`	Past een backdrop op de body toe terwijl de offcanvas open is. Of geef `static` op voor een backdrop die de offcanvas bij klikken niet sluit.
`keyboard`	boolean	`true`	Sluit de offcanvas wanneer op de Escape-toets wordt gedrukt.
`scroll`	boolean	`false`	Staat scrollen van de body toe terwijl de offcanvas open is.

Methodes

Gevaar

Deze methode start een overgang. Roep hem niet opnieuw aan zolang de vorige nog bezig is: dat levert onverwacht gedrag op. Wacht op het bijbehorende gebeurtenis voordat je opnieuw aanroept.

Activeert je content als offcanvas-element. Accepteert een optioneel options-object.

Je kunt een offcanvas-instantie maken met de constructor, bijvoorbeeld:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

Methode	Omschrijving
`getInstance`	Statische methode waarmee je de offcanvas-instantie kunt ophalen die bij een DOM-element hoort.
`getOrCreateInstance`	Statische methode waarmee je de offcanvas-instantie kunt ophalen die bij een DOM-element hoort, of een nieuwe kunt aanmaken als die nog niet was geïnitialiseerd.
`hide`	Verbergt een offcanvas-element. Keert terug naar de aanroeper voordat het offcanvas-element daadwerkelijk verborgen is (dus vóór de gebeurtenis `hidden.bs.offcanvas`).
`show`	Toont een offcanvas-element. Keert terug naar de aanroeper voordat het offcanvas-element daadwerkelijk getoond is (dus vóór de gebeurtenis `shown.bs.offcanvas`).
`toggle`	Schakelt een offcanvas-element naar getoond of verborgen. Keert terug naar de aanroeper voordat het offcanvas-element daadwerkelijk getoond of verborgen is (dus vóór de gebeurtenis `shown.bs.offcanvas` of `hidden.bs.offcanvas`).

Gebeurtenissen

De offcanvas-klasse van Bootstrap stelt een aantal gebeurtenissen beschikbaar om op de offcanvas-functionaliteit in te haken.

Type gebeurtenis	Omschrijving
`hide.bs.offcanvas`	Deze gebeurtenis wordt direct afgevuurd wanneer de methode `hide` is aangeroepen.
`hidden.bs.offcanvas`	Deze gebeurtenis wordt afgevuurd wanneer een offcanvas-element voor de gebruiker verborgen is (wacht tot de CSS-transities voltooid zijn).
`hidePrevented.bs.offcanvas`	Deze gebeurtenis wordt afgevuurd wanneer de offcanvas getoond wordt, zijn backdrop `static` is en er buiten de offcanvas wordt geklikt. De gebeurtenis wordt ook afgevuurd wanneer op de Escape-toets wordt gedrukt terwijl de optie `keyboard` op `false` staat.
`show.bs.offcanvas`	Deze gebeurtenis wordt direct afgevuurd wanneer de instantiemethode `show` wordt aangeroepen.
`shown.bs.offcanvas`	Deze gebeurtenis wordt afgevuurd wanneer een offcanvas-element zichtbaar is gemaakt voor de gebruiker (wacht tot de CSS-transities voltooid zijn).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // doe iets...
})