Přejít na hlavní obsah Přejít na navigaci v dokumentech
in English

Offcanvas

Zabudujte do svého projektu skryté postranní panely pro navigaci, nákupní košíky a další pomocí několika tříd a našeho pluginu JavaScript.

Na této straně

Jak to funguje

Offcanvas je komponenta postranního panelu, kterou lze pomocí JavaScriptu přepínat tak, aby se zobrazovala z levého, pravého nebo spodního okraje výřezu. Tlačítka nebo kotvy se používají jako spouštěče, které jsou připojeny ke konkrétním prvkům, které přepínáte, a dataatributy se používají k vyvolání našeho JavaScriptu.

  • Offcanvas sdílí některé ze stejného kódu JavaScript jako modály. Koncepčně jsou si dost podobné, ale jedná se o samostatné pluginy.
  • Podobně některé zdrojové proměnné Sass pro styly a rozměry offcanvas jsou zděděny z proměnných modalu.
  • Když se zobrazí, offcanvas obsahuje výchozí pozadí, na které lze kliknout a skrýt offcanvas.
  • Podobně jako u modalů lze současně zobrazit pouze jedno mimo plátno.

Hlavy vzhůru! Vzhledem k tomu, jak CSS zpracovává animace, nemůžete použít marginnebo translatena .offcanvasprvek. Místo toho použijte třídu jako nezávislý prvek obtékání.

Efekt animace této komponenty závisí na prefers-reduced-motiondotazu na média. Podívejte se na část s omezeným pohybem v naší dokumentaci přístupnosti .

Příklady

Offcanvas komponenty

Níže je uveden příklad offcanvas, který je zobrazen ve výchozím nastavení (přes .show) .offcanvas. Offcanvas obsahuje podporu pro záhlaví s tlačítkem pro zavření a volitelnou třídu těla pro některé počáteční soubory padding. Doporučujeme, abyste zahrnuli záhlaví offcanvas s akcemi zavření, kdykoli je to možné, nebo poskytli explicitní akci zavření.

Offcanvas
Obsah pro offcanvas je zde. Zde můžete umístit téměř jakoukoli komponentu Bootstrap nebo vlastní prvky. 
<div class="offcanvas offcanvas-start" 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 text-reset" 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>

Živé demo

Pomocí tlačítek níže můžete zobrazit a skrýt prvek offcanvas prostřednictvím JavaScriptu, který přepíná .showtřídu na prvku s .offcanvastřídou.

  • .offcanvasskryje obsah (výchozí)
  • .offcanvas.showzobrazuje obsah

Můžete použít odkaz s hrefatributem nebo tlačítko s data-bs-targetatributem. V obou případech data-bs-toggle="offcanvas"je požadováno.

Propojit s href
Offcanvas
Nějaký text jako zástupný symbol. V reálném životě můžete mít prvky, které jste si vybrali. Like, text, obrázky, seznamy atd. 
<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 text-reset" 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" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <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>

Umístění

Pro komponenty offcanvas neexistuje žádné výchozí umístění, takže musíte přidat jednu z níže uvedených tříd modifikátorů;

  • .offcanvas-startumístí mimo plátno nalevo od výřezu (zobrazeno výše)
  • .offcanvas-endumístí mimo plátno napravo od výřezu
  • .offcanvas-topumístí mimo plátno v horní části výřezu
  • .offcanvas-bottomumístí mimo plátno na spodní část výřezu

Vyzkoušejte příklady nahoře, vpravo a dole níže.

Offcanvas top
... 
<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 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas vpravo
... 
<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 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Spodní část z plátna
... 
<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 text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Pozadí

Posouvání <body>prvku je zakázáno, když je viditelné mimo plátno a jeho pozadí. Pomocí data-bs-scrollatributu můžete přepínat <body>rolování a data-bs-backdroppřepínat pozadí.

Barevné s rolováním

Zkuste posouvat zbytek stránky, abyste viděli tuto možnost v akci.

Offcanvas s pozadím

.....

Pozadí s posouváním

Zkuste posouvat zbytek stránky, abyste viděli tuto možnost v akci.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<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" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" 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>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<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 text-reset" 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>

Přístupnost

Since the offcanvas panel is conceptually a modal dialog, be sure to add aria-labelledby="..."—referencing the offcanvas title—to .offcanvas. Note that you don’t need to add role="dialog" since we already add it via JavaScript.

Sass

Variables

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

Usage

The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:

  • .offcanvas hides the content
  • .offcanvas.show shows the content
  • .offcanvas-start hides the offcanvas on the left
  • .offcanvas-end hides the offcanvas on the right
  • .offcanvas-bottom hides the offcanvas on the bottom

Add a dismiss button with the data-bs-dismiss="offcanvas" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.

Via data attributes

Toggle

Add data-bs-toggle="offcanvas" and a data-bs-target or href to the element to automatically assign control of one offcanvas element. The data-bs-target attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class offcanvas to the offcanvas element. If you’d like it to default open, add the additional class show.

Dismiss

Dismissal can be achieved with the data attribute on a button within the offcanvas as demonstrated below:

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

or on a button outside the offcanvas using the data-bs-target as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
While both ways to dismiss an offcanvas are supported, keep in mind that dismissing from outside an offcanvas does not match the WAI-ARIA modal dialog design pattern. Do this at your own risk.

Via JavaScript

Enable manually with:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-backdrop="".

Name Type Default Description
backdrop boolean true Apply a backdrop on body while offcanvas is open
keyboard boolean true Closes the offcanvas when escape key is pressed
scroll boolean false Allow body scrolling while offcanvas is open

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

Activates your content as an offcanvas element. Accepts an optional options object.

You can create an offcanvas instance with the constructor, for example:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Method Description
toggle Toggles an offcanvas element to shown or hidden. Returns to the caller before the offcanvas element has actually been shown or hidden (i.e. before the shown.bs.offcanvas or hidden.bs.offcanvas event occurs).
show Shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the shown.bs.offcanvas event occurs).
hide Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden (i.e. before the hidden.bs.offcanvas event occurs).
getInstance Static method which allows you to get the offcanvas instance associated with a DOM element
getOrCreateInstance Static method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn’t initialized

Events

Bootstrap’s offcanvas class exposes a few events for hooking into offcanvas functionality.

Event type Description
show.bs.offcanvas This event fires immediately when the show instance method is called.
shown.bs.offcanvas This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.offcanvas This event is fired immediately when the hide method has been called.
hidden.bs.offcanvas This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})